没有警报，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（）;”它不会将click事件添加到$（“a [type ='submit']”）对象。可能有什么不对？

Answer 1

  

它不会将click事件添加到$（“a [type ='submit']”）对象

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

当AJAX调用完成时，将调用您的success处理程序，这是执行此操作的合适时机：

$("#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的整个生命周期内不会改变的公共父元素。）