We Keep Coding

Document click not working on dynamic element

Content script:
var $ = window.$.noConflict(true); // Required for IE
function startFunc() {
$('a').mouseover(function(e){
var anchor=this;
var href=$(anchor).attr('href');
if(href!='#'){
$('.klik-me').remove();
const xPos=e.pageX-20;
const yPos=e.pageY-20;
let $klikMe=$('<span class="klik-me">Click Me!!</span>').css({
'padding':'5px',
'background':'#000',
'color':'#FFF',
'font-size':'12px',
'position':'static',
'top':yPos,
'left':xPos,
'text-align':'center',
'z-index':999999
});
$(anchor).append($klikMe);
}
});
}
$('body').on('click','.klik-me',function(){
const href_in=$(this).parent().attr('href');
kango.console.log(href_in);
kango.dispatchMessage('storeHref', {href:href_in});
});
kango.addMessageListener('hrefSuccess', function(event) {
kango.console.log(event.data.link);
});
Background Script:
kango.addMessageListener('storeHref', function(event) {
event.target.dispatchMessage('hrefSuccess', {link:event.data.href});
});
I am adding a pop up for all anchor tags on the page (this is working fine),i added a click event in Jquery(I love this) and using kango.dispatchMessage for sending message to background script. Nothing seems to be working.
Any help would be appreciated.
PS: i use to work with crossrider(Awesome) framework previously.

What I think is happening is the click event is bubbling up to your <a> element and triggering the default navigation action.
Stopping bubbling / default behaviour in delegated event handling is difficult. What I would do instead, is remove the <span> as a child of the <a>. For example
let $klikMe = $('<span class="klik-me">Click Me!!</span>')
.css({ ... })
.data('href', href) // set the href data into the <span>
$(document.body).append($klikMe) // append to body, not anchor
and in your click handler
$(document).on('click', '.klick-me', function() {
const href_in = $(this).data('href')
// then continue as in your original code
return false // the click should have no default action
})

Use the snippet below is what I'm reading everywhere, I can't get it working however.
Currently trying to do somewhat the same: jQuery click event after new page loads
Maybe it can be of some use.
Cheers.
$(parent).on('click', child , callback);

Creating an element that can remove it self?

I'm building a lightbox as a school project, and I can't use jQuery. I've got an image. When you click it, Javascript makes a transparent div with the ID "overlay". I want the div to remove itself, or the parent to remove it but it doesn't work. I think it has to do with the fact that you can't link 'onclick' to an element that doesn't exists yet.

You have to remove the element from the parent. Something like this:
d = document.getElementById('overlay');
d.parentNode.removeChild(d);
Or you could just hide it:
d.style.display = 'none';
And, oh: you can add Javascript code to a (newly created) element by assigning a function to the onclick attribute.
d = document.createElement('div');
d.onclick = function(e) { this.parentNode.removeChild(this) };

You can remove the element like the following
var el = document.getElementById('div-02');
el.remove(); // Removes the div with the 'div-02' id
Click here for more details

Don't use the onclick handler in the tag, use Javascripts event functions such as addEventListener to dynamically add the event to the elements. You should also make sure that when you remove the elements you properly clean up all your references (in other words, unregister the event handlers).

I've got it :)
I was doing it like bart sad, but it didn't work. my code looked something like this:
image.onclick = function(){ *create overlay*};
overlay.oncklick = function() {*overlay.parentNode.removeChild(overlay)*};
the browser goes like wtf? cause it reads the code and thinks "i cant check if the user clicked a non-existing element."
So I did this:
image.onclick = function(){
*create overlay*
overlay.onclick = function() {*remove overlay*};
};

how to remove all ClientEvents from anchors in an HTML String with jQuery

I've been struggling with what seems to be a simple problem for a few hours now. I've written a REGEX expression that works however I was hoping for a more elegant approach for dealing with the HTML. The string would be passed in to the function, rather than dealing with the content directly in the page. After looking at many examples I feel like I must be doing something wrong. I'm attempting to take a string and clean it of client Events before saving it to our Database, I thought jQuery would be perfect for this.
I Want:
Some random text click here and a link with any event type
//to become:
Some random text click here and a link with any event type
Here's my code
function RemoveEvilScripts(){
var myDiv = $('<div>').html('testing this Do it! out');
//remove all the different types of events
$(myDiv).find('a').unbind();
return $(myDiv).html();
}
My results are, the onClick remains in the anchor tag.

Here's a pure Javascript solution that removes any attribute from any DOM element (and its children) that starts with "on":
function cleanHandlers(el) {
// only do DOM elements
if (!('tagName' in el)) return;
// attributes is a live node map, so don't increment
// the counter when removing the current node
var a = el.attributes;
for (var i = 0; i < a.length; ) {
if (a[i].name.match(/^on/i)) {
el.removeAttribute(a[i].name);
} else {
++i;
}
}
// recursively test the children
var child = el.firstChild;
while (child) {
cleanHandlers(child);
child = child.nextSibling;
}
}
cleanHandlers(document.body);​
working demo at http://jsfiddle.net/alnitak/dqV5k/

unbind() doesn't work because you are using inline onclick event handler. If you were binding your click event using jquery/javascript the you can unbind the event using unbind(). To remove any inline events you can just use removeAttr('onclick')
$('a').click(function(){ //<-- bound using script
alert('clicked');
$('a').unbind(); //<-- will unbind all events that aren't inline on all anchors once one link is clicked
});
http://jsfiddle.net/LZgjF/1/

I ended up with this solution, which removes all events on any item.
function RemoveEvilScripts(){
var myDiv = $('<div>').html('testing this Do it! out');
//remove all the different types of events
$(myDiv)
.find('*')
.removeAttr('onload')
.removeAttr('onunload')
.removeAttr('onblur')
.removeAttr('onchange')
.removeAttr('onfocus')
.removeAttr('onreset')
.removeAttr('onselect')
.removeAttr('onsubmit')
.removeAttr('onabort')
.removeAttr('onkeydown')
.removeAttr('onkeypress')
.removeAttr('onkeyup')
.removeAttr('onclick')
.removeAttr('ondblclick')
.removeAttr('onmousedown')
.removeAttr('onmousemove')
.removeAttr('onmouseout')
.removeAttr('onmouseover')
.removeAttr('onmouseup');
return $(myDiv).html();
}

getting contents with tinyMCE?

I have a tinyMCE textarea #frmbody and am using the jquery instance of it.
<textarea class="tinymce" name="frmbody" id="frmbody" cols="30" rows="20"></textarea>
I'm trying to get the contents of the textarea as the user types.
$("#frmbody").live('keyup', function(e) {
alert("keyup");
});
The code above is not working and I'm not sure why. If I remove the tinyMCE instance, the code above works fine. Any ideas?

That's because an instance of TinyMCE isn't a true textarea, so keyup events aren't detected. Try the onchange callback instead.

You can make tinyMCE own listener by:
http://www.tinymce.com/wiki.php/API3:event.tinymce.Editor.onKeyUp
or write your own and use built-in function getContent:
http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent

One could just grab the contents of the editor using :
tinymce.activeEditor.getContent();
If you want to attach an onchange event, according to this page, http://www.tinymce.com/wiki.php/api4:class.tinymce.Editor, create the editor using the following code :
var ed = new tinymce.Editor('textarea_id', {
init_setting_item: 1,
...
}, tinymce.EditorManager);
ed.on('change', function(e) {
var content = ed.getContent();
$("#textarea_id").val(content); // update the original textarea with the content
console.log(content);
});
ed.render();
Please note that onchange is fire when the user unfocuses, press enter, or press a toolbar button instead of every keystroke.

It is very easy to write an own handler and assign it to the editor iframe document.
There are tinymce handlers for various events already defined like keyUp
Here is the standard way to assign an own handler to the editor iframe document
var my_handler = function(event) {
alert('my handler fired!');
};
var ed = tinymce.get('my_editor_id');
$(ed.getDoc()).bind('keyup', my_handler);

TinyMCE hides the Text Area and creates a html container. If you write content in the box its a iFrame with the name "TEXTAREANAME_ifr".
So try this:
$("#frmbody_ifr").live('keyup', function(e) {
alert("keyup");
});
I think as Thariama already said the EventHandler from TinyMCE would be the best way.

Detect click outside an element (with frames)

I have a main page (main.html) which opens an iframe page (iframe.html).. The iframe is appended as a kind of thickbox window on main.html .Now on this iframe.html, there is a div element "myDiv" and I need to detect click outside of this myDiv element..
The script is written inside a JS called in iframe.html
I already tried a few things (binding event to document and removing from myDiv), but that is not working..
$(document).click(function() {
//your code here
});
$("#myDiv").unbind("click");
I am not sure if this issue has got anything to do because of the iframe...
Please help me. Thank you.

Have you tried something like this? It listens for all clicks on the document, but only triggers your code if the target of the event is not the myDiv element. This way, you can tell if the click was outside the myDiv element or not.... I used jQuery:
// assign a document listener
$(document).click(function(e){
if( $(e.target).attr('id') != "myDiv" )
{
// execute your code here
alert( e.target ); }
});
// assign an element listener
$('#myDiv').live('click',function(){alert("clicked on myDiv")});
It also allows you to assign specific code to the myDiv element to be executed if the user clicks on the myDiv element directly...

I think you want to hide the myDiv if you click outside of it, try this.
$(document).click(function() {
$("#myDiv").hide();
});
$("#myDiv").click(function(e){
e.stopPropagation();
});

This is a "flag & ignore" routine that I was talking about. I'm hoping there's a jQuery-native method to do this, because using flags like this is a dirty hack IMO
var myDiv = false;
$(document).click(function() {
if (!myDiv) {
// your code here
}
myDiv = false;
});
$("#myDiv").click(function(e){
myDiv = true;
return false; // don't know if returning false will stop propagation in jQuery
});