javascript - 从自身内部调用函数

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

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

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

• http://api.jquery.com/on/
• http://learn.jquery.com/events/event-delegation/

Answer 2

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

您可以通过使用 jquery 加载 url 内容来进一步缩短代码

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 3

只要打电话events()。它在范围内！

不过，您需要注意以下几点：

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