Question

在以下代码中，添加按钮动态地将包含删除按钮的<TR>附加到表中。以下代码$('a.remove_performer').live()收到错误“Uncaught TypeError：undefined is not a function”且无法附加事件处理程序？

更新将live()更改为on()，错误消失了。但是，事件处理程序仍未附加。

http://jsfiddle.net/emg9yxwc/1/

<table>
    <thead>
        <tr>
            <th>Column1</th>
            <th></th>
        </tr>
    </thead>
    <tbody id="performerBody"></tbody>
    <tfoot>
        <tr>
            <td>
                <select id="performerList" name="performerList" class="valid">
                    <option value="1">performer1</option>
                    <option value="2">performer2</option>
                </select>
            </td>
            <td><a id="addNewPerformer" href="#" class="add_performer">Add</a>

            </td>
        </tr>
    </tfoot>
</table>

<script>
$(document).ready(function () {
    // Add new row
    $("#addNewPerformer").click(function (e) {
        e.preventDefault();
        $last = $("#performerBody tr:last");
        var index = 0;
        if ($last.length > 0) {
            index = $last.find(':input:first').attr('name').match(/\d+/);
            index = parseInt(index) + 1;
        }
        var selected = $("#performerList").val();
        if ($('#performerBody input[value="' + selected + '"]').length === 0) {
            var name = "Performers[" + index + "].Id";
            var selectedText = $("#performerList :selected").text();
            $("#performerBody").append('<tr><td><span style="display:none"><input name="' + name + '" type="number" value="' + selected + '"></span>' + selectedText + '</td><td><a href="#" class="remove_performer">Remove</a></td></tr>');
        }
    });

    // Remove
    $('a.remove_performer').on("click", function (e) { // was live
        e.preventDefault();
        $(this).parent().parent().remove();
    });
});
</script>

Answer 1

.live()已弃用 1.7 ，已删除 1.9

事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码进行事件绑定调用时的页面上。

您需要使用Event Delegation委托事件方法{。}}来使用.on()。

委派事件的优点是，它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素。

即

$(document).on('event','selector',callback_function)

代替document，您应该使用最近的静态容器。

根据您的代码。使用

$("#performerBody").on('click', 'a.remove_performer', function (e) {
    e.preventDefault();
    $(this).parent().parent().remove();
});

如何将事件添加到在运行时创建的元素？

1 个答案: