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

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


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

最佳答案

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

更改:

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


至:

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


查看this link以获得更多信息。

10-07 17:06