tags:

views:

246

answers:

2

Let's say I use jQuery to load new content into a specific DIV element. If I now want to catch events from inside that DIV element, I assume the DOM has to be updated somehow? What is the best way to deal with this?

Edit: Here is an example of what I mean:

<html>
  <head>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script>
      $(document).ready(function(){
        $(".edit").click(function(){
          $(this).parent().load("edit");
        });
        $(".view").click(function(){
          $(this).parent().load("view");
        });
      });
    </script>
  </head>
  <body>
    <div class='someid'>
      <input type='submit' class='edit' value='Edit'>
    </div>
  </body>
</html>

where a file edit at the same level contains

<input type='submit' class='view' value='View'>

and a file 'view' contains

<input type='submit' class='edit' value='Edit'>

If you try this out you will see that when you first press Edit, the button changes to View, but then it doesn't change anymore. Why is this?

+1  A: 

jQuery uses "live" events to deal with things happening in dynamically added DOM elements without having to manually add handlers after a content-update.

brownstone
I've added an example to my original post to show what the problem is
astrofrog
+2  A: 

Use live like this:

 $(".view").live("click",function(){
      $(this).parent().load("view");
    });
mofle