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 () {

查看this link了解详情。

Answer 2

由于在AJAX调用之后创建了删除按钮，因此“on”方法不会将事件附加到它。您可以使用live方法。它将考虑附加方法后创建的元素。

编辑：顺便说一句，这取决于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元素时绑定，或者像在其他答案中一样使用事件委托。

jQuery下拉列表没有触发删除按钮

3 个答案: