Question

I have the following code defined in order to hide certain elements of a list:

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $(".done").toggle();
  });
});
</script>

Basically, any < button > element being clicked will execute the toggle() function on any element with the “done” class. I know this works, because it works on some of my buttons. I have a page made up of several included files (using PHP include()). Usually, the javascript works in and out of these included files, but for some reason if I put a button inside one of them, it doesn’t work – the function only works for buttons placed on the document where the script is defined. Is this always the case, or am I doing something wrong?

Answer 1

Try changing:

$("button").click(function(){

to:

$("button").live('click', function(){

This will make the event bind to any button, no matter when they are added. If you are using .live, then you don’t need it inside a $(document).ready( block, as .live will add the event when the element is added.