Question

我注意到javascript在这两种情况下表现不同，我想了解原因。

使用这样的链接和脚本：

<a class="delete-link" href="@Url.Action("_CustomFieldDelete", new {id = item.CustomFieldId})">Delete</a>

//... In my script.js file.
$(function () {
    $("a.delete-link").click(function () {
        var deleteLink = $(this);
        deleteLink.hide();
        var confirmButton = deleteLink.siblings(".delete-confirm");
        confirmButton.show();

        var cancelDelete = function () {
            removeEvents();
            showDeleteLink();
        };

        var deleteItem = function () {
            removeEvents();
            confirmButton.hide();
            var url = '/' + confirmButton.attr('data-delete-controller') + '/' + confirmButton.attr('data-delete-action') + '/' + confirmButton.attr('data-        delete-id');
            $.post(
                url,
                AddAntiForgeryToken({ id: confirmButton.attr('data-delete-id') }))
               .done(function () {
                   var parentRow = deleteLink.parents("tr:first");
                   parentRow.fadeOut('fast', function () {
                       parentRow.remove();
                   });
               }).fail(function (data) {
                   alert("error");
               });
            return false;
        };

        var removeEvents = function () {
            confirmButton.off("click", deleteItem);
            $(document).on("click", cancelDelete);
            $(document).off("keypress", onKeyPress);
        };

        var showDeleteLink = function () {
            confirmButton.hide();
            deleteLink.show();
        };

        var onKeyPress = function (e) {
            //Cancel if escape key pressed
            if (e.which == 27) {
                cancelDelete();
            }
        };

        confirmButton.on("click", deleteItem);
        $(document).on("click", cancelDelete);
        $(document).on("keypress", onKeyPress);

        return false;
    });
});

该链接适用于初始页面加载。但是，链接是部分视图的一部分，当我使用ajax重新加载局部视图时，链接不再起作用。这就像class =＆＃34; delete-link＆＃34;之间的链接一样。并且javascript不再存在。

顺便说一句，当我加载有问题的局部视图时，我这样做：

$.ajax({
    url: this.action,
    type: this.method,
    data: $(this).serialize(),
    success: function (result) {
        targetDiv.html(''); // Clear it out
        // Refresh the listDiv
        listDiv.load(listDiv.attr('data-source-href')); // This is where I get the partial list reloaded
    }
});

我认为如果我在链接中指定onclick事件而不是依赖于链接它的dom / javascript，它就会起作用。所以我尝试了这个：

<a onclick="DeleteLink(this);" href="@Url.Action("_CustomFieldDelete", new {id = item.CustomFieldId})">Delete</a>

//... In my script.js file.
DeleteLink = function (link) {
    var deleteLink = $(link);
    deleteLink.hide();
    //... Remainder is exactly the same as $("a.delete-link").click(function () {
};

然而，这不起作用，我可以通过javascript，所以它被调用，但然后confirmButton恢复，或者我导航到href中的路线。我还在努力想出那个部分。

也许它导致它的下午5点，也许我错过了一些明显的东西......我怎么能得到

$("a.delete-link").click(function () {

即使从ajax负载开始工作也是如此？

Answer 1

实际上，答案很简单。您绑定事件的元素不存在，因此您必须将其绑定到该绑定时存在的元素。您可以使用元素的父级或文档对象。

要将事件绑定到动态内容，请使用此解决方案：

$(document).on('click', 'a.delete-link', function (event) {
    // code code code
});

分配事件观察者和设置onclick之间的区别是什么？

1 个答案: