Question

我有两个ajax函数，一个在循环中递归工作，另一个在调用click事件时工作。我测试了两个可以正常工作的功能。但是，当我启动递归函数按钮事件时，不会被调用。

可用于单击事件的功能，可从ActionResult（MVC）获取内容

function UpdateRequests(url, state, id, cell)
{
    $.ajax({
        type: "GET",
        url: url + id,
        success: function (result) {

            if (result == "OK")
            {
                cell.fadeOut("normal", function () {
                    $(this).html(state);
                }).fadeIn();  
            }
            else if(result == "DELETE" || result == "CANCEL")
            {
                cell.parent().fadeOut("normal", function () {
                    $(this).remove();
                });  
            }
            else
            {
                $(".modal-body").html(result);
                $("#myModal").modal();
            }
        },
        error: function () {
            alert("Something went wrong");
        }
    });
}

递归函数从ActionResult（MVC）获取局部视图

function RefreshRequests()
        {
            if (isListPage())
            {
                var id = PageId();
                var url = "/Home/List/" + id;
            }
            else
            {
                var url = "/Home/Index";
            }

            $.ajax({
                type: "GET",
                url: url,
                success: function (data) {
                    $(".ajaxRefresh").html(data);
                    EditPageHeader();
                },
                complete: function () {
                    setTimeout(RefreshRequests, 2000);
                }
            });
        }

点击事件

    $(".tblRequests").on("click", button, function (e) {

        e.preventDefault();

        var id = $(this).data("id");
        var currentRow = $(this).closest("tr");
        var cell = currentRow.children('td.requestState');

        UpdateRequests(url, state, id, cell);
    });

主要

    $(document).ready(function () {

        EditPageHeader();

        RefreshRequests();
        ButtonEvent(".btnPrepare", "/Home/Prepare/", "PREPARING");
        ButtonEvent(".btnApprove", "/Home/Approve/", "APPROVED");
        ButtonEvent(".btnCancel", "/Home/Cancel/", "CANCELED");

        RefreshRequests();
    });

Answer 1

假设：

Ajax调用将带给您的数据作为模式主体中的HTML元素结束。
上面添加的这些新元素需要响应click事件（目前无法正常运行的事件）

如果以上两个条件为真，则说明您正在将事件绑定到现有元素（如果有），而新元素（来自API响应）未绑定到click事件。

声明

$(".tblRequests").on("click", button, function (e) {
... 
})

每次将新元素添加到主体时，都需要执行

。更好的方法是将事件处理程序定义为单个方法，然后将其绑定到每个新元素。

var clickHandler = function (e) {

  e.preventDefault();

  var id = $(this).data("id");
  var currentRow = $(this).closest("tr");
  var cell = currentRow.children('td.requestState');

  UpdateRequests(url, state, id, cell);
}
// Then for each new record that you add
$(".tblRequests").on("click", button, clickHandler);

如果您可以尝试解释要达到的目标，那将很有帮助。

Answer 2

问题是$(this)将保留选择器的所有元素。而且现在也会触发一次，因为它将触发一次，然后再也不会触发。同样从here可以看出，委托事件应该在包含动态元素的最接近的静态元素处。

    function ButtonEvent(button, url, state)
    {
        $("body").on("click", button, function (e) {

            e.preventDefault();
            var button = e.target;

            var id = $(button).data("id");
            var currentRow = $(button).closest("tr");
            var cell = currentRow.children('td.requestState');

            UpdateRequests(url, state, id, cell);
        });
    }

当ajax调用在循环中运行时，单击事件上的jQuery不起作用

2 个答案: