[jQuery] re-binding events after the DOM has been modified
Hi all,
I modify the DOM using append. How can I rebind all defined events
after I have modified the DOM, i.e. is there something similar to the
apply() method of the Behavior library.
Below is an example of what I'm trying to do. In the following
fragment I have a SPAN with class 'showbutton' which onclick shows a
DIV with class 'descr'. Clicking on the DIV itself clones it with new
ID but the same class 'descr' and adds a SPAN on top, with the same
class 'showbutton'.
Now, what I am trying to achieve is to re-bind the defined events to
the newly created SPAN and DIV, so that when I click each newly
created SPAN it shows the relevant DIV, and when I click on the DIV it
again clones itself.
Here is the example code:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script language="JavaScript">
var maxid = 1;
$(document).ready(function(){
var buttonbind = function(){
show_id = "div"+this.id.substring(3);
var el = document.getElementById(show_id);
$(el).show("slow");
};
var descrbind = function(){
new_id = maxid+1;
$("body").append("<span id='but"+new_id+"'
class='showbutton'>Show"+new_id+"</span>");
$("body").append("<div style='display: none' class='descr'
id='div"+new_id+"'>"+this.innerHTML+"</div>");
maxid++;
}
$("span.showbutton").bind("click", buttonbind);
$("div.descr").bind("click",descrbind);
});
</script>
</head>
<body>
<span id="but1" class="showbutton">Show1</span>
<div style="display: none" class="descr" id="div1">some text here</div>
</body>
</html>
Thanks in advance,
Ivan
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/