Hello I am having a problem with .html function in jquery. event listener doesn't work anymore everytime i remove the script from the codes and paste it again. can you help me how to reactive script after it's re-paste in html.
You can set your events using .live() method. Like:
$("#submit_button").live("click",function(e){
});
This way if you are adding/removing html from your page using .html() method, the events will remain intact.
Hope that helps.
You could use the .live() method to register the event handler which will preserve it even if the corresponding DOM element is recreated. Example:
$(function() {
$('#someid').live('click', function() {
//
});
});
I guess you are changing the inner html of some container with .html() function of jquery and the events you assigned are lost after the process. There are two approaches you can take:
If the content doesn't change use the .detach() function to remove and insert your elements back. The .detach() function preserves and event handlers attached to the elements you detach. However if you are inserting a different content then use .live() event to assign your events. The events that are assigned with .live() will be recreated when a element with the same selector is inserted into the dom.
Use this as an example:
$('a.button').live('click', function(){
//anchor tag clicked.
alert('Button has been clicked');
});
The .live():
Attach a handler to the event for all
elements which match the current
selector, now and in the future.
The .live() method is able to affect
elements that have not yet been added
to the DOM through the use of event
delegation.
This means that you add and remove html from your page with .html() and your events will still perform.
See the jQuery website for more information on .live()
A quick jsFiddle example.
Related
is there any difference between this both selectors in combination with a click event?
$("#container").find(".element").on("click",function(){
})
$("#container").on("click", ".element",function(){
})
For me I think technically the effect and consequence will be the same?
Thank you
They are not the same.
The first example using find().on() looks for the .element class in the DOM and adds the event handler to it. It will not work for any elements with that class that are added to the DOM later in the page lifecycle.
The second example using on() with a selector is a delegated event handler, and will therefore work for all matching elements in the DOM as well as those added later.
I am trying to copy a div content from one place to another, for this I am using something like:
$('#newDiv').html($('#oldDiv').html());
The problem is that some child elements have events attached using the bind() jquery method. I would want to copy also those events to the new location.
Any idea about a way to do this "event copy"?
Description
You create dynamic content in the moment you copy the content.
You need jQuery .live() or delegate() method to bind events to dynamically created html.
Choose .live() or delegate() depending on the version of jQuery you are using.
.live() Available since jQuery 1.3. Attach an event handler for all elements which match the current selector, now and in the future.
.delegate() Available since jQuery 1.4.2. Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.
Check out my sample and this jsFiddle Demonstration
Sample
<div id="newDiv"></div>
<div id="oldDiv"><a>click me</a></div>
$("a").live("click",function() {
alert("click");
});
// copy content
$('#newDiv').html($('#oldDiv').html());
More Information
jQuery.live()
jQuery.delegate()
jsFiddle Demonstration
If you use the jquery Clone method you can set a parameter specifying if you want to keep events or not... check out: http://api.jquery.com/clone/
It should do nicely.
I've a table generated dynamically by jQuery, using
this.html("<table><tr><td><div>Click Me</div></td></tr></table>");
within the table, I've a few divs (my sample shows only one to keep things simple), which I want to add click event handler to. I'd like to keep html clean and use as much of jQuery power as I can, but since I'm doing an 'eval' type of things I can't quite figure out how to do that.
I know, that I can use $("div[some attribute selector]").on("click", {}, clickHandler);, but is it a good idea in my case?
You need delegated events. To do that, simply use jQuerys on() method like this:
$(document.body).on('click', 'div', function( event ) {
// do something
});
Ref.: .delegate(), .on()
What is that? Almost all events do what we call 'bubble'. That means, if you click on a nested element, your browser looks if there is any click-event handler ascociated on that node. If so, it executes them and then the parent of that element is also asked if there is any click-event handler. This continues until either some handler prevents the event from further bubbling or we have reached the document.documentElement (html).
So, you should change the above document.body into the closest node relative to your dynamically added elements.
You can use either use live or delegate to do that
I'm creating and removing HTML from inside a div with jQuery (shopping cart, adding/removing items). I need to access the .click() event of a link inside this div, but it only works when the page first loads - after that link is removed then re-added it doesn't respond to any jQuery events.
I've tried functions both inside and outside of $j(document).ready(function() {}. How can I make events work on this link again after re-creation?
Use .delegate() instead of .click() (which is short-hand for .bind('click')):
$(<root-element>).delegate('a', function () {...});
Attach a handler to one or more events for all elements that match the
selector, now or in the future, based on a specific set of root
elements.
Source: http://api.jquery.com/delegate/
The <root-element> can be the document element or if you know an element that is always present that is a descendant of the document element it is best to use that element.
You need to either reattach the event every time you overwrite the content of your container div or set handler using live/delegate/on depending on the version of jQuery you use.
Second method is in general more elegant, but has drawbacks. In particular you cannot cancel the default action from cascaded even attached to the container.
The .click() event only works for elements that are present with the function is called. You need to look into using either .live() or .delegate() to attach listeners to elements that are dynamically created after $(document).ready()
Try using .detach() instead of .remove(), that will keep the events. Alternatively use event delegation.
Is it possible to clone event from one element, to another.
For example:
$('.somelink').click({data:data},somefunc);
I need event in another place in document for element with different class.
You can pass multiple selectors to $(), separating them by comma. Like this:
$('.somelink, .some-otherlink, #third-id').live('click', {data:data}, somefunc);
Now they all share the same click event
The jQuery .clone() function has an optional withDataAndEvents argument which will copy the node itself, all attached events and any inline data.
See http://api.jquery.com/clone/ for more details.
Extending on #moe's answer. Use .live() to bind events to elements even if they are not in the DOM. They will be bound as soon as they exist.
$('.somelink, .some-otherlink, #third-id').live('click',{data:data},somefunc);
To copy it, you can do:
$('.somelink').click( $('.otherlink').attr('onclick') );