I'm using JQuery to set the HTML inside a div. Something like this:
$(div).html(strHtmlBlob);
strHtmlBlob is a chunk of HTML returned via Ajax from the server. After, it's assigned, I set up some events for elements in the new HTML blob by doing this:
$(div).find("a").click(a_ClickHandler);
That all works perfectly fine. The problem is REMOVING the events. I want to make sure I clean up the DOM properly.
I'm removing the HTML like so:
$(div).html("");
But I can see that the events are still there. Is there a way to clean up events for elements that no longer exist?
Use .remove() instead of .html("")
That will clear the elements and events all at once. JQuery does a lot of cleanup magic under the covers if you let it.
$(div).find('a').unbind('click');
Check out the documentation.
Alternatively, you should empty() it:
$(div).empty();
According to the docs:
Note that this function starting with 1.2.2 will also remove all event handlers and internally cached data.
Related
I'm working with a large template of charts and other widgets. I also manually implemented some ajax tabs. Now whenever those tabs load new content (charts), the problem is that all the template scripts in the head tag won't work with those ajax-loaded elements anymore.
I know, normally you would use .live for this kind of problem, but this would mean to go into the whole 50k lines-js template and change everything to .live calls... Not really able to do that.
Is there instead a jquery way of reloading/reactivating all the scripts within the head-tag?
First off .live() has long since been deprecated and even removed from the latest versions of jQuery. You should never be thinking of using .live().
Second, as it sounds like you already know, the "right" way to fix this is to change your code to use the delegated form of .on() which is what replaced .live(). Yes, change all the code that does it the wrong way. Here's a post on using the delegated form of .on() instead of .live().
Third, a work-around would be to put all your initialization code that hooks up these event handlers into a single function (or called by a single function). Then, you call that single function upon initialization and then you can call that single function any time later after you reload your content. The trick is that you can only put code into that initialization function that can be called or should be called more than once after you content has been reloaded. If you put some event handlers in there that should not be in there, then you may get duplicate event handlers installed. So, only event handler initialization that applies to the replaced content should go in this function.
Suppose that function was called initDynamicContent, then it could look like this:
// init event handlers on the original version of the dynamic content
$(document).ready(initDynamicContent);
Then, sometime later after you replace the dynamic content, you can just do:
// code here that replaces the dynamic content with new content
initDynamicContent();
There is no magic jQuery way for this to happen automatically. jQuery has absolutely no way of knowing which code should be run again and which code should not.
I have a message-slot in the page, I show different messages in it. For each message I run the template and I append that HTML to messageslot like this. I add html("") to clear the box first. Is there a better way of doing this?
$("#message-slot").html("").append(messagetemplate);
Just do:
$("#message-slot").html(messagetemplate);
It will clear any existing contents before replacing them (reference):
When .html() is used to set an element's content, any content that was
in that element is completely replaced by the new content.
As a side note, be mindful of any existing event handlers that might be attached to elements you're removing. You'll want to be sure to unbind them. See unbind() and remove() for more info.
I got to refactor big one-page application with complex UI.
There is following code in document.ready function
$('table.datatable').dataTable({ ... params ... });
$('div.tooltip').tooltip({ ... params ... });
$('ul.dropdownMenu').menu({ ... params ... });
As you can see in this code we search for different HTML controls and call to appropriate jQuery plugins that implement these controls' behavior.
However, since the page is very dynamic new datatables, tooltips and menus are added all the time and since JS functions were called at very beginning of application - those elements have no needed functionality unless I manually call appropriate plugin for them.
I'd like to eliminate the need to call jQuery plugin after each DOM change but don't know how to do it better.
One option is to fire an event each time I am adding anything to DOM and re-call this plugins in event's listener, however I don't like this solution because of need to remember fire the event each time.
I read about jQuery's on function which attach events also for not yet exists elements, but what event do I need? AFAIK there is no domchange event.
Any advises?
Your only option is to hook up your plug-ins on new items after they are added to the DOM. The best cross browser option would be to hook into each place that adds these types of elements to the DOM and simply deal with the new items there by calling some additional function on them. What you need to look for is where you can easily hook into your existing code after new elements have been added to the DOM and then fix up those new elements at that point. Without knowing your code and where the DOM is modified, we can't really advise the best way to do that.
Generically monitoring the DOM for new items with a single method is not possible in a cross browser fashion. Mutation observers are the latest standard way to do this, but it is not supported in many browsers yet. Mutation events came before mutation observers, but is now deprecated.
jQuery's .on() will not do what you want here - it can be used to handle dynamically added DOM elements, but not in the way you want. Your plug-ins could have been designed to handle their events with use .on(), but unless they were designed that way and you can take advantage of that, there isn't a simple way for you to use it to get your desired behavior without rewriting a portion of the plugin.
I am dynamically appending HTML to a webpage and I'm also using jQuery to manage stuff.
When I add HTML code, jQuery ignores its existence.
For example:
$("td.elementToClick").click(...
Will work great with jQuery. But if somewhere in the code I append:
$("tr#myRowToAppend").append("<td class="elementToClick>...</td>");
jQuery will ignore this new element if I click on it.
As jQuery associates the events after the page finishes loading, I need one of two solutions:
- Force the DOM to re eval the page without changing the current layout (I don't wish a refresh, so location.reload() is out of the question).
- Force jQuery to add this new element to it's internal event manager.
I don't wish to use onclick="blabla()", I really need to use jQuery.
How can I accomplish this?
What you are looking for is jQuery live. From docs description: "Binds a handler to an event (like click) for all current - and future - matched element. Can also bind custom events."
There is also a plugin liveQuery that supports a wider range of events if you want.
the live() method will alleviate most of your headaches.
I see this happening more often in IE and with cloned elements, to support IE you have to be much more careful with DOM manipulation.
I also see alot of questions on SO with people having issues of copying/moving dom elements to new parts of the dom without cloning it first, which doesn't workout so well in IE.
So you can use live or when you have to handle events from dynamically inserted DOM elements, make sure you clone them with clone(true) to specify you want the events copied:
$("body").append('<div id="one"></div>");
$("#one").mouseover(function(){});
$("body").append( $("#one").clone(true).attr('id','two') );
What happens in jQuery when you remove() an element and append() it elsewhere?
It appears that the events are unhooked - as if you were just inserting fresh html (which I guess is what happening). But its also possible my code has a bug in it - so I just wanted to verify this behavior before I continue.
If this is the case - are there any easy ways to rehookup the events to just that portion of HTML, or a different way to move the element without losing the event in the first place.
The jQuery detach() function is the same as remove() but preserves the event handlers in the object that it returns. If you have to remove the item and place it somewhere else with everything you can just use this.
var objectWithEvents = $('#old').detach();
$('#new').append(objectWithEvents);
Check the API docs here: http://api.jquery.com/detach/
Yes, jQuery's approach with remove() is to unbind everything bound with jQuery's own bind (to prevent memory leaks).
However, if you just want to move something in the DOM, you don't have to remove() it first. Just append to your heart's content, the event bindings will stick around :)
For example, paste this into your firebug on this page:
$('li.wmd-button:eq(2)').click(function(){ alert('still here!') }).appendTo(document.body)
And now scroll down to the bottom of this page and click on the little globy icon now buried under the SO footer. You will get the alert. All because I took care to not remove it first.
use jQuery1.3.1 live() to bind events and you won't need to worry about this..
Update: live events are deprecated now, but you can get the same effect from $(document).on().