html - Button not working after appending jQuery 1.9.1 -
here code: http://jsfiddle.net/cwwwn/
i'm still fresh jquery. i'm wanting have add , delete button that'll add row when add pushed , delete row button clicked on. reason, add button stops working after first append. if clone, commented out code, add button stops working after first delete. ideas?
html:
<table border="1" name="phonetable" id="phonetable" width="100%"> <thead> <tr> <th> primary </th> <th> type </th> <th> phone number</th> <th> details </th> <th> add </th> <th> delete </th> </tr> </thead> <tbody> <tr> <td><input type="radio" name="phoneprimary[]"/></td> <td> <select style="" name="phonetype[]"> <option value="1">not completed</option> <option value="2">mobile</option> <option value="3">home</option> <option value="4">work</option> <option value="5">near by</option> </select> </td> <td><input type="text" style="width: 200px;" name="phonenumber[]" /></td> <td><input type="text" name="phonedetails[]" /></td> <td><button type="button" id="addbutton">+ add</button></td> <td><button type="button" id="deletebutton">- delete </button></td> </tr> </tbody> js:
$("#addbutton").on("click", function () { alert("clicked add! "); $('#phonetable tr:last').after('<tr><td><input type="radio" name="phoneprimary[]"/></td><td><dropdown:dropdownphonetype entities="${applicationbean.phonetypes}" name="phonetype[]"/></td><td><input type="text" placeholder="(999) 999-9999" class="phone-mask textfield" data-tooltip="please enter valid <b>number</b>" style="width: 200px;" name="phonenumber[]" /></td><td><input type="text" name="phonedetails[]" /></td><td><button class="button button-black" type="button" id="addbutton">+ add</button></td><td><button class="button button-black" type="button" id="deletebutton">- delete </button></td></tr>'); //$('#phonetable tbody > tr:last').clone(true, true).appendto("#phonetable"); $('#phonetable tbody > tr:last').prev().find("button[id='addbutton']").remove(); }); $("#deletebutton").on("click", function () { if($("#phonetable tbody > tr").length <= 1) { return false; } $('#phonetable tbody > tr:nth-last-child(2) > td:nth-last-child(2)').append('<button type="button" id="addbutton">+ add</button>'); $ $('#phonetable tbody > tr:last').fadeout('slow', function () { $('#phonetable tbody > tr:last').remove(); }); //alert('delete clicked'); });
.on() doesn't work think does. if want event delegated (in old terms, live), need bind event parent, , pass optional selector parameter. elements added dynamically after hander bound, need bind events so:
$('body').on('click', '#addbutton', function() { // code here });
Comments
Post a Comment