SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict mmanders's Avatar
    Join Date
    Jul 2006
    Location
    Edinburgh, Scotland
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding elements with DOM

    I have datatable form with a layout similar to a spreadsheet. Initially only a single row is displayed, but if a user wants to add another record, they can click a button to add a new row. This button fires some JavaScript that clones the current row node, resets all values to "" and appends the new row to the end of the table. With two of the fields, I have used a class of "date-picker" on an input field to attach a jQuery datepicker function. The problem is that when I clone the row node, the new now doesn't seem to trigger the jQuery date picker. I would have thought that if the node was cloned, then any behaviours attached to it would be cloned also. Does anyone have any suggestions as to why this isn't working?

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have no experience with jQuery, but my guess is that you need to assign event listeners explicitly to the appropriate elements in the cloned row.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think he's right, I don't think event handlers are cloned when a node is cloned.

    Dave

  4. #4
    SitePoint Addict mmanders's Avatar
    Join Date
    Jul 2006
    Location
    Edinburgh, Scotland
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help guys. So perhaps ocne I have called the function add a new row, I should call a function to walk the DOM for the table and add appropriate event handlers to inputs of class="date-picker"?

    @baliramvyas: thank you for promoting your collection of ebooks. I have several reference books and Google at my finger tips but neither have been helpful thus far.

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mmanders View Post
    So perhaps ocne I have called the function add a new row, I should call a function to walk the DOM for the table and add appropriate event handlers to inputs of class="date-picker"?
    That sounds about right. Just the way it's done for the elements in the row you're cloning.
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dwees View Post
    I think he's right, I don't think event handlers are cloned when a node is cloned.

    Dave
    Event handlers are not cloned, which is a shortcoming.

    So perhaps ocne I have called the function add a new row, I should call a function to walk the DOM for the table and add appropriate event handlers to inputs of class="date-picker"?
    Well, to clone a node, you already have a reference to the original node, so you should transfer the event handler(s) to the new node using that reference. No need to walk the DOM.

    newNode.onclick = originalNode.onclick;

  7. #7
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think it has to do with how your events are handled. If you add events to your tds the n00b way, ie
    <td onmouseover="something();">

    then it works fine after cloning. Maybe because you're using a more sophisticated way it's not.


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
  •