Question

我在容器中有几个元素。他们的所有事件都在函数events()内处理。

单击容器内的按钮，我将容器的html替换为来自AJAX请求的响应。

function events() {
    $(".btn").on("click", function() {
     ...
    }); 

    $(".txt").on("keyup", function() {
     ...
    });

    $(".btn2").on("click", function() {
                var xmlhttp;
                if (window.XMLHttpRequest) {
                    xmlhttp = new XMLHttpRequest();
                }
                xmlhttp.onreadystatechange = function() {
                    if (xmlhttp.readyState == 4) {
                       $(".container").html(xmlhttp.responseText); 
                       events(); // ***
                    }
                }
                url = 'handlers/gethtml.ashx';
                xmlhttp.open("GET", url, true);
                xmlhttp.send(null);
        });
}

现在，我需要使用事件重新绑定所有控件，所以在更改html $(".container").html(xmlhttp.responseText);之后我调用了自己的函数，因为新的html包含具有相同事件的相同控件。

这会导致堆栈溢出吗？我有一些性能问题，所以我想知道这可能是原因。此外，是否有任何解决方法，也许更优雅的方式来做到这一点？

Answer 1

使用事件委托，然后无需重新绑定事件，因为它也将处理动态元素

您可以使用jquery加载网址内容

来进一步缩短代码

function events() {
    var ct = $(".container");
    ct.on("click", ".btn", function() {
    }); 

    ct.on("keyup", ".txt", function() {
    });

    ct.on("click", ".btn2", function() {
        ct.load('handlers/gethtml.ashx')
    }

Answer 2

尝试使用事件委派，您不需要再次绑定事件

$(".container").on("click",".btn2", function() {...});

Answer 3

只需致电events()即可。它在范围内！

但是，您需要注意以下几点：

已经存在的元素将在第二次运行时有两个点击处理程序 - 旧的和新的。要删除它们，请使用unbind取消绑定所有click个事件，例如。
您可能希望进一步分割您的活动创建功能。

从内部调用函数

3 个答案: