I have a little problem with jQuery .live method. I am using it for catching ajax events for Google Analytics on my website, but in case I have a link with an inner image, the click event is fired up from the image and my live binded click event does not catch it.
I really dont like to add these events manually everytime after changing content and I dont like to bind it to the image (because of the missing href parameter, this case I had use some .parent method), so what is the best way how to handle this?
Notice: I am not sure about efficiency of the .live method, so in case there are big performance differences, please tell me that:) I tried to profile it in webkit profiler, but I didn't see any difference..
Just place a click(function(event) { ... }) handler on the static parent element, and find the element which started the event with event.target.
Assuming you have an a containing an img, any event on the img should bubble to the a, which will catch it.
You could also try using the .delegate() method (http://api.jquery.com/delegate/)
Here is some more info regarding .live() vs. delegate():
http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery
http://www.youtube.com/watch?v=23Q4S9hmHQY
jQuery: live() vs delegate() [stackoverflow.com]
Update:
Here is a post by Jupiter 24 about "Why you should never use jQuery live":
http://jupiterjs.com/news/why-you-should-never-use-jquery-live
Related
I was under the impression that jQuery's on event handler was meant to be able to 'listen' for dynamically created elements AND that it was supposed to replace the behavior of live. However, what I have experienced is that using on is not capturing the click event whereas using live is succeeding!
The tricky aspect of my situation is that I am not only dynamically creating content but I'm doing it via an AJAX .get() call, and inserting the resultant HTML into a modal .dialog() jQueryUI popup.
Here is a simplified version of what I was trying to accomplish (wrapped in $(document).ready(...) ):
$.get("getUserDataAjax.php", queryString, function(formToDisplay) {
$("#dialog").dialog({
autoOpen: true,
modal: true,
buttons...
}).html(formToDisplay);
});
$(".classThatExistsInFormToDisplay").on("click", function() {
alert("This doesn't get called");
});
From the documentation for on I found this which which was how I was approaching writing my on event:
$("p").on("click", function(){
alert( $(this).text() );
});
However, for some reason, live will work as I expect -- whereas on is failing me.
This isn't a question for "how can I make it work" because I have found that on will succeed (capture clicks) if I declare it inside the function(formToDisplay) callback.
My question is: what is wrong with on that it isn't finding my dynamically created elements within a modal popup? My jQuery instance is jquery-1.7.2. jQueryUI is 1.8.21.
Here are two jsFiddles that approximate the issue. Click the word "Test" in both instances to see the different behavior. The only difference in code is replacing on for live.
Where the click is captured by live.
Where the click is NOT captured by on (click 'Test - click me' to see nothing happen).
I realize I may just be using on inappropriately or asking it to do something that was not intended but I want to know why it is not working (but if you have something terribly clever, feel free to share). Thanks for your wisdom!
Update / Answer / Solution:
According to user 'undefined', the difference is that on is not delegated all the way from the top of the document object whereas live does/is.
As Claudio mentions, there are portions of the on documentation that reference dynamically created elements and that what you include in the $("") part of the query needs to exist at runtime.
Here is my new solution: Capture click events on my modal dialog, which, although it does not have any content when the event is created at runtime, will be able to find my content and element with special class that gets generated later.
$("#dialog").on("click", ".classThatExistsInFormToDisplay", function() {
... //(success! Event captured)
});
Thanks so much!
live delegates the event from document object, but on doesn't, if you want to delegate the event using on method, you should delegate the event from one of static parents of the element or document object:
$(document).on("click", ".clickHandle", function() {
alert("Content clicked");
});
The problem is that the element to which you attach the event has to exist.
You have to use on like this to capture clicks on p tags created dynamically
$("#existingContainerId").on("click", "p", function(){
alert( $(this).text() );
});
if you have no relevant existing container to use, you could use $("body") or $(document)
If selector is omitted or is null, the event handler is referred to as direct or directly-bound. The handler is called every time an event occurs on the selected elements, whether it occurs directly on the element or bubbles from a descendant (inner) element.
When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next
Take a look to section Direct and delegated events here for more details
I have button with id = new which loads the new page
$("#new").click(function(){
$('#message_area').load('new.php');
});
There is a button in new.php which sends message to database. But i have a problem with it , it only works for first time when page loads if i navigate to some other links via ajax and again load new.php using above code then send button in new.php does not work i have to refresh the page then it works. I think its because the send button in new.php is added after DOM is created for first time .
Please help Thanks in advance ..
You will need to post more details of your markup for a more accurate answer, but the general idea is to use event delegation. Bind the event handler to an ancestor of the button that does not get removed from the DOM. For example:
$("#message_area").on("click", "#yourButton", function() {
//Do stuff
});
This works because DOM events bubble up the tree, through all of an elements ancestors. Here you are simply capturing the event higher up the tree and checking if it originated from something you are interested in (#yourButton).
See jQuery .on for more. Note that if you're using a version of jQuery below 1.7, you will need to use delegate instead.
//jquery >= v1.7
$("body").on('click', '#new', function(){
$('#message_area').load('new.php');
});
//jquery < v1.7
$("#new").live('click',function(){
$('#message_area').load('new.php');
});
$("#new").live("click", function(){
$('#message_area').load('new.php');
});
just realized this was deprecated-- should be using on instead.. my bad.
To manage dynamically created elements like this, you need to use .on() (jQuery 1.7 and above) or .delegate() (jQuery 1.4.3 and above) to assign the events. Seems everyone has beaten me to the code, but I'll post this for the links to the functions.
Working on a Wicket application that adds markup to the DOM after onLoad via Wicket's built-in AJAX for an auto-complete widget. We have an IE6 glitch that means I need to reposition the markup coming in, and I am trying to avoid tampering with the Wicket javascript... blah blah blah... here's what I'm trying to do:
New markup arrives in the DOM (I
don't have access to a callback)
Somehow I know this, so I fire my
code.
I tried this, hoping the new tags would trigger onLoad events:
$("selectorForNewMarkup").live("onLoad", function(){ //using jQuery 1.4.1
//my code
});
...but have become educated that onLoad only fires on the initial page load. Is there another event fired when elements are added to the DOM? Or another way to sense changes to the DOM?
Everything I've bumped into on similar issues with new markup additions, they have access to the callback function on .load() or similar, or they have a real javascript event to work with and live() works perfectly.
Is this a pipe dream?
.live() doesn't work like this, it's a common misconception. .live() creates an event handler at the DOM root and waits for events to bubble up to it. If the selector matches the event target, .live() will fire the bound event.
It doesn't look for new objects and bind events to them in any way, rather it just listens for a bubble, and doesn't care when that object was added to the DOM.
You need to fire whatever code is needed to run manually when your load operation completes.
What will this is the livequery plug-in, look specifically at the livequery( matchedFn ) call.
You can do something like this:
$('#myID').livequery(function() { $(this).offset()...stuff });
i guess this is what you are looking for http://ananthakumaran.github.com/2010/02/19/wicket-post-ajax-handling.html
After I load a page through a WebBrowser, and I click a link that fires an AJAX script, I need to detect when the AJAX java script finishes loading HTML changes into a div. Since no DocumentCompleted event is fired when the AJAX script is run, I don't know when it finish running. Is there a way I can attach an event to be raised after I know 100% that the javascript finished changing the div?
The project is in C#.
Thanks
I did something similar recently (using jQuery):
$('#mydiv').change(function(){
// do stuff
}
);
Granted, I also use jQuery to set the HTML of that div. I suppose one non-jQuery approach for you could be to set HTML through your own function, which in turn can fire an onchange event.
#New in town: From my experience that is not correct. I use this on multiple DIVs that never get focus in the first place, and it works well and consistently. The normal behavior is as you describe, and normally only applies to the INPUT and SELECT elements, but this is not the case with jQuery.
There is no event. You must patch the JavaScript callback that the browser runs when the reply for the AJAX request comes in. This will contains code like "div.innerHTML = ...". Just put your code below that.
How can I know the url under the mouse cursor from a firefox extension?
I need to interact with the href from within the overlay.js file.
I'd want a lightweight solution, for example I don't want to attach some event to all hrefs found in a page.
I'd rate a mouseover solution but how can't find anything useful for me!
Thanks
You could use event delegation and attach single event listener to the document.body element, instead of all hrefs on the page. Then you need to check if the element which triggered your listener is a link or not. Here's a simple example that demonstrates the idea:
document.body.addEventListener( 'mouseover',
function(e){
if(e.target.nodeName=='A'){ alert( e.target.href ) }
}, false);
You don't really have a choice but to attach an event to all anchor tags on a page. Sorry.