gpt4 book ai didi

jquery - 附加 jQuery 1.9.1 后按钮不起作用

转载 作者:太空宇宙 更新时间:2023-11-04 13:35:03 25 4
gpt4 key购买 nike

这是代码:http://jsfiddle.net/cwWWN/

我对 jQuery 还很陌生。我想要做的就是有一个添加和删除按钮,当按下添加时,该按钮将添加一行,并删除单击该按钮的行。出于某种原因,添加按钮在第一次追加后停止工作。如果我做一个克隆,就像注释掉的代码一样,添加按钮在第一次删除后停止工作。有什么想法吗?

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 the 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 a 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() 并不像您想象的那样工作。如果您希望事件被委托(delegate)(在旧术语中,实时),您需要将事件绑定(bind)到父级,并向其传递一个可选的选择器参数。因此,对于在处理程序初始绑定(bind)后动态添加的任何元素,您需要像这样绑定(bind)您的事件:

$('body').on('click', '#addButton', function() {
// code here
});

参见:http://api.jquery.com/on/

关于jquery - 附加 jQuery 1.9.1 后按钮不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16342220/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com