jQuery下拉列表不触发删除按钮

Question

在我的小型练习项目中，我有一个带有删除按钮的下拉列表：

function getMessages() {
        $.ajax({
            type: "POST",
            url: "/Message/GetMessageMethod",
            contentType: "application/json; charset=utf-8",
            datatype: "json",
            success: function(data) {
                var jsonData = $.parseJSON(data);
                var newHtml = "<table style='width: 100%;'class='table-hover'><tr><th>Message</th><th>Date Posted</th><th>Posted by</th></tr>";
                for (var i = 0; i < jsonData.length; i++) {
                    newHtml += "<tr><td>" + jsonData[i].message + "</td><td>" + jsonData[i].date + " - " + jsonData[i].time + "</td><td>" + jsonData[i].name + "</td><td><div class='btn-group'>"+
                    "<a class='btn dropdown-toggle' data-toggle='dropdown' href='#'> Actions " +
                        "<span class='caret'></span></a>" +
                        "<ul class='dropdown-menu' role='menu'>" +
                        "<li role='presentation'><input type='button' role='menuitem' value='Delete' class='btn btn-danger delMsg'/></li>" +
                        "</ul></div></td></tr>";
                }
                newHtml += "<table>";
                $('#txfMessage').html(newHtml);
            }
        });
    };

但是，当我单击删除按钮时，我的删除按钮没有启动...我在萤火虫中有一个断点，但是没有到达它...

$('.delMsg').on('click', function () {
            $.ajax({
                type: "POST",
                url: "/Message/DeleteMessage",
                contenetType: "application/json; charset=utf-8",
                datatype: "json",
                cache: false,
                data: JSON.stringify({
                    id: $('#txfMessage').val()
                }),
                success: function() {
                    getMessages();
                }
            });
        });

我可能做错了什么，从昨天开始我一直在忙这个，但找不到任何东西...请帮助！ 先感谢您！

Answer 1

您需要使用jQuery事件委托，因为您试图将事件附加到DOM中尚不存在的元素。

更改：

$('.delMsg').on('click', function () {

至：

$(document).on('click', '.delMsg', function () {

查看此链接以获取更多信息。

Answer 2

由于删除按钮是在AJAX调用之后创建的，因此您的“ on”方法不会将事件附加到该按钮。 您可以使用实时方法。 它将说明方法附加后创建的元素。

编辑：顺便说一下，这取决于JQuery版本。 live仍然有效。 如果必须使用on ，请正确使用它，如Pierre Granger和Jamie Dunstan指出的那样。

Answer 3

您必须执行以下操作：

$('#txfMessage').html(newHtml);
$('.delMsg').on('click', function () {
            $.ajax({
                type: "POST",
                url: "/Message/DeleteMessage",
                contenetType: "application/json; charset=utf-8",
                datatype: "json",
                cache: false,
                data: JSON.stringify({
                    id: $('#txfMessage').val()
                }),
                success: function() {
                    getMessages();
                }
            });
        });

即绑定每次您添加新的html元素，或使用事件委托，如其他答案。