Adding events to elements that will be created later
The .bind() method attaches events to only those elements that exist on a page. If any new elements are created that match the criteria for the .bind() method, they will not have any event handlers.
How to do it...
Create a new file in the
chapter1directory and name it aslive.html.Write the HTML, which creates a button and a DIV on the page and styles them a bit.
<html> <head> <title>Attaching events elements </title> <style type="text/css"> div { border: 1px solid black;cursor:pointer;width:200px;margin:10px; } </style> </head> <body> <input type="button" id="button" value="Create New Element"/> <div class="future">Already on page</div> </body> </html>Time to spice things up with jQuery. Attach a
clickevent to the button. This button will create the new DIV elements and will insert them into the page. Now attach aclickevent handler to the DIV using thelive()method. Clicking on the DIV will change its CSS and HTML.<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#button').click(function() { $('body').append('<div class="future">I am a new div</div>'); }); $('div').live('click', function() { $(this).css({'color':'red','font-weight':'bold'}).html('You clicked me'); }); }); </script>Run the
live.htmlfile and click on the DIV. You will see that its HTML and CSS has changed. Now click on the Create New Element button a few times to create some DIV elements. Clicking on any of these DIV elements will change their appearances. A typical screenshot after a few clicks will look similar to the following:
How it works...
The input button creates the new DIV elements and appends them to the body of a document. The secret lies in the next function. We have used jQuery's live() method to attach an event on click of a DIV element. live() behaves exactly like bind() for attaching events with only one major difference. Where bind() can add events to only existing elements on a page, live() remembers the attached event for that selector and applies it to matching elements even if they are created later and then inserted into a page.
Therefore, all new DIV elements that are created as a result of clicking on the Create New Element button also respond to the click event handler.
Removing event handlers with die()
The die() method is similar to the unbind() method. It is used to remove event handlers that were attached using the live() method. Similar to unbind(), die() also has two variations.
If it is called with no parameters, all event handlers will be removed. Another variation accepts an event type name that will remove that particular event:
$(element).die();
The following is the code for other variations that will remove only the specified event handler.
$(element).die('click');If an element has more than one event handler attached to it, the above code will remove only the click event handler and will leave the others intact.
See also
Binding and unbinding elements provides basic information about adding and removing events from elements.
