1

I know that isn't first topic of this type but I have read almost all similar topics and proposed solutions don't work.

I have table with 8 handmade rows, there is also add row button which adds row in this way:

function addNewRow(){   
    var numRows = $('#newTasks tr').length; 
    $('#newTasks').append('<tr id="row'+numRows+'"><td><input type="text" id="title-'+numRows+'" /></td><td><input type="text" id="description-'+numRows+'" /></td><td><input type="button" id="delete-'+numRows+'" class="deleteButton" value="x" /></td></tr>');
}

As you can see I have delete button in each row but in dynamically generated rows it doesn't work.

$(document).ready(function(){

    [...]

    //Delete button click event
    $('.deleteButton').click(function(){        
        alert($(this));
        deleteRow($(this));
    });
});

Even alert action isn't triggered by dynamically generated button but in case of handmade rows it works fine. I think it doesn't treat dynamically generated buttons as classified "deleteButton" but from the other hand css does. 

function deleteRow(thisButton){
    thisButton.parent().parent().remove();
}
bmbbambus
  • 51
  • 1
  • 5
  • You must use `.on('click', '.button', function () { ... your code here })` – James111 Dec 20 '16 at 00:54
  • because the event isnt bound to elements added after the dom was initially parsed see http://api.jquery.com/on/ – andrew Dec 20 '16 at 00:54
  • because events do not get bound, you need to use event delegation like the dupe says. `$("#newTasks").on("click", ".deleteButton", function () { $(this).closest("tr").remove(); });` – epascarello Dec 20 '16 at 00:55
  • Thanks guys , I didn't know that dynamically generated objects must have handle to already existing object. Sorry for post. – bmbbambus Dec 20 '16 at 01:16

0 Answers0