2

I have a form with which I use jQuery ".clone()" to add new rows. Everything looks great, however I have a binding problem. Basically, on initialization, I use the jQuery ".datepicker()" function for one field (based on class). If I use ".clone()" by itself I don't get any of the ".datepicker()" functionality with the new item. If I use ".clone(true)" I get the functionality, but for cloned rows it fills the date of the row it was cloned from, not the actual row clicked.

I've tried unbinding/rebinding, but none of this works. So, how do I append new rows to a form while still getting all of the jQuery funness to work properly?

Best

EDIT 1 (jQuery):

function addLineItem(){
    $('#charges_table tr:last').clone(true).insertAfter('#charges_table tr:last');
}

$(function(){
    $('.date_pick').datepicker({"numberOfMonths": 2});
    $("#add_line_item").bind('click',function(event){
        event.preventDefault();
        addLineItem();
        $('.date_pick').datepicker('destroy');
        $('.date_pick').datepicker();
    })
})

FYI, I'm only binding on class, and the HTML elements aren't using an ID to speak of.

humble_coder
  • 2,777
  • 7
  • 34
  • 46
  • Hard to say without seeing the code. Can you edit your question to include a brief code sample or post a link to a jsfiddle page illustrating the problem? – dgvid Dec 21 '11 at 17:29
  • stackoverflow.com/questions/3628405/clone-live-function-with-context-parameter-jquery-1-4 – Ajinkya Dec 21 '11 at 17:32
  • clone returns a ref to the new element.. you can add the handler again to that. – Amitd Jul 06 '13 at 12:49

2 Answers2

0

When you .clone(), are you changing the ID of the element before you insert it back into the DOM? If not, your ID would be duplicated, and that could be the source of your trouble.

Jake Feasel
  • 16,785
  • 5
  • 53
  • 66
0

First, as written, your method addLineItem is always going to clone whatever the last row of the table is: $('#charges_table tr:last'). It sounds like you want to clone the table row within which the click occurred. If that is the case, then something like this should do the trick:

function addLineItem(row){
    $(row).clone(true).insertAfter('#charges_table tr:last');
}

$(function(){
    $('.date_pick').datepicker({"numberOfMonths": 2});
    $("#add_line_item").bind('click',function(event){
        event.preventDefault();
        // Pass the closest 'tr' element to the element clicked.
        addLineItem($(this).closest('tr'));
    });
});

I haven't tested this code, but it is based on similar table row cloning code in one of my projects.

dgvid
  • 26,293
  • 5
  • 40
  • 57
  • Thanks for that. I'm not sure we're on the same page. Perhaps I didn't explain myself clearly. My problem isn't with the actual cloning, but with ".datepicker()" binding not working appropriately on new rows. Regardless of how I do the cloning, the ".datepicker()" functionality always applies to the last of the "original" rows. – humble_coder Dec 21 '11 at 19:09
  • Hmm. Am I right in thinking that the .datepick element is within a cell in the row? If so, what happens if you do this: $(row).clone().insertAfter('#charges_table tr:last').find('.datepick').datepicker(); Any closer? – dgvid Dec 21 '11 at 19:20