jQuery 脚本在没有警报的情况下无法工作

Question

我有一个使用 jquery 的脚本，但我在下一部分遇到了问题：

        $("#botonAgregar").click(function() {
            $.ajax({
                type: "GET",
                url: $(this).attr('href'),
                success: function(html) {
                    $("#dialogDiv").html(html);
                    $("#dialogDiv").dialog('open');
                }
            });
            alert();
            $("a[type='submit']").click(function() {
                var formName = $(this).attr("nombreform");
                var formSelector = "form#" + formName;
                $(formSelector).submit();
            });
            return false;
        });

它按原样工作，但如果我删除“alert();”它不会将点击事件添加到 $("a[type='submit']") 对象。有什么问题？

Answer 1

它不会将点击事件添加到 $("a[type='submit']") 对象

是的。但是，如果在 AJAX 调用期间添加了更多这些元素，那么在将这些新元素添加到 DOM 之后，您需要将处理程序重新添加到这些新元素中。目前您没有这样做，因为代码在您对.ajax() 的调用发生在之前 AJAX 调用完成。这是因为根据定义，AJAX 是异步的。 可能 AJAX 调用在稍后的代码执行之前完成，但不能保证。 （对于紧随其后的代码，这种可能性极小。）

您的 success 处理程序在 AJAX 调用完成时被调用，因此这是执行此操作的好时机：

$("#dialogDiv").html(html);
$("#dialogDiv").dialog('open');
$("a[type='submit']").click(function() {
    var formName = $(this).attr("nombreform");
    var formSelector = "form#" + formName;
    $(formSelector).submit();
});

但是，有更好的方法来做到这一点。

您使用的方法的一个问题是您将一遍又一遍地将处理程序重新添加到相同的元素。当您真的只需要一个时，您还向许多元素添加了相同的处理程序。看看the jQuery .on() function。本质上，它所做的是将单个处理程序添加到目标元素的公共父元素，然后根据目标元素选择器过滤事件。所以你只需要添加一次处理程序：

$(function () {
    $(document).on('click', 'a[type=submit]', function () {
        var formName = $(this).attr('nombreform');
        var formSelector = 'form#' + formName;
        $(formSelector).submit();
    });
});

在这种情况下，我使用document 作为公共父级，尽管任何其他父级都可以。 （body 标记，包含所有目标元素的 div 等。它只需要是一个公共的父元素，在 DOM 的整个生命周期中都不会改变。）