从内部调用函数

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. 您可能想要进一步分解您的事件创建功能。