SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Location
    Ballarat, Vic. Australia
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Table row can't be selected with jquery after append

    Hello Javascript Guru People,

    I have an interesting problem with a document management system I'm currently working on. I'm using the CodeIgniter framework with plenty of jquery ajax goodness. So here's the problem...

    I pop up a dialog to create a new project. When the details are filled in it makes an ajax call to add the data to the database and also appends that data to a HTML table like this (where plist is a complete table row):

    Code:
    $("#projecttable").find('tbody').append(plist);
    Each table row has two icons - one to edit the entry and the other to delete the entry. Each row also has a unique ID (like projectrowNN). On the appended row these icons don't work until the whole page is refreshed. Logic tells me it's because jquery sees the DOM as it was when the page was loaded, and when you append a row, jquery only knows about the selectors in the DOM that were there the last time the page was refreshed - like it doesn't go scan the page every time you give it a selector to do something with.

    My question then is - is there any way to make this appended row visible to jquery? Or... am I barking up the wrong tree and it should be visible, so there's some other issue. There aren't any errors btw - at least not that firebug can see.

  2. #2
    Learning... tahirjadoon's Avatar
    Join Date
    Jan 2003
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Example one will not work, click can't be attached as the "appended html" is not available.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
     <script src="jquery-1.4.min.js" type="text/javascript"></script>
     <script type="text/javascript">
      $(document).ready(function() {
       $('#tdone').click(function(){
        alert($(this).html());
       });
       var plist = "<tr><td id='tdone'>Row One - Click me </td></tr>" + 
          "<tr><td id='tdtwo'>Two</td></tr>"
       $("#someTable").find('tbody').append(plist);
      });
     </script>
    </head>
    <body>
     <table id="someTable">
      <tbody>
     
      </tbody>
     </table>
    </body>
    </html>
    You'll need to either bind your click events below the append code:

    Code:
    var plist = "<tr><td id='tdone'>Row One - Click me </td></tr>" + 
          "<tr><td id='tdtwo'>Two</td></tr>"
       $("#someTable").find('tbody').append(plist);
     
       $('#tdone').click(function(){
        alert($(this).html());
       });
    or use live method to bind your event:

    Code:
    $('#tdone').live('click', function(){
        alert($(this).html());
       });
     
       var plist = "<tr><td id='tdone'>Row One - Click me </td></tr>" + 
          "<tr><td id='tdtwo'>Two</td></tr>"
       $("#someTable").find('tbody').append(plist);
    You can read about live here:
    http://www.bennadel.com/blog/1751-jQ...t-Bubbling.htm

    http://www.bennadel.com/blog/1772-jQ...it-Support.htm

    Change event, i think still doesn't work with the select boxes when use live to bind even in 1.4. If some one knows how to do it without using the livequery plugin, please let us know.
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Location
    Ballarat, Vic. Australia
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! That's exactly what I needed. It took about 30 seconds to change the functions to use live()


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •