Question

以下是代码：http://jsfiddle.net/cwWWN/

我对jQuery还很新鲜。我想要做的就是有一个Add和Delete按钮，当按下Add时会添加一行，删除单击按钮的行。由于某种原因，添加按钮在第一次追加后停止工作。如果我执行克隆，如注释掉的代码，则在第一次删除后，“添加”按钮将停止工作。有什么想法吗？

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');
});

Answer 1

.on（）不像您认为的那样工作。如果您希望委派事件（旧的，实时），则需要将事件绑定到父级，并将其传递给可选的选择器参数。因此，对于在最初绑定hander之后动态添加的任何元素，您需要像这样绑定事件：

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

请参阅：http://api.jquery.com/on/

Answer 2

试试这个 - 工作演示 - ＆gt; http://jsfiddle.net/mohammadAdil/cwWWN/4/

$("#phoneTable").on("click","#deleteButton", function () {

$("#phoneTable").on('click', '#addButton', function() {

Answer 3

您的新ADD按钮无法正常工作的原因是您在创建新的ADD按钮时未添加click事件侦听器。

Fiddle example

来自小提琴：

function addRow() {
    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();
    $("#addButton").on("click", addRow);
}

$("#addButton").on("click", addRow);

对删除按钮执行相同的操作。

附加jQuery 1.9.1后按钮不起作用

3 个答案: