2

这是代码：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');
});
4

3 回答 3

14

.on() 不像你想象的那样工作。如果您希望事件被委托（在旧术语中，实时），您需要将事件绑定到父级，并将其传递给可选的选择器参数。因此，对于在最初绑定处理程序后动态添加的任何元素，您需要像这样绑定事件：

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

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

于 2013-05-02T15:48:38.720 回答
1

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

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

$("#phoneTable").on('click', '#addButton', function() {
于 2013-05-02T15:43:54.133 回答
1

您的新添加按钮不起作用的原因是您在创建新添加按钮时没有添加点击事件侦听器。

小提琴示例

从小提琴：

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

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

于 2013-05-02T15:54:42.987 回答