jquery - jquery.load() 获取内容后 jQuery 函数不起作用

Question

我有一个页面并在 custom.js 文件中定义了我的 java 脚本函数（我正在使用 jQuery）。</body>我将 JS 文件放在标签之前的正文末尾

我的页面有一个这样的 div 元素：<div id="userinfo"></div> 当我的页面加载时，我的 JS 文件会获取一个外部页面。

外部页面有这样的元素<div id="login"></div>

在我的 JS 文件中，我定义了一个函数，当用户单击login模态窗口时，它会加载一个向用户显示登录表单的函数。

但是当我加载外部页面时，我的 JS 文件不起作用！！似乎找不到元素。

请指导我！:)

custom.js 文件的某些部分：

jQuery(document).ready(function($) {

 $('#userinfo').load('CustomerOptions.asp');

  (function() {
     $('#login').click(function(event){
         // something to do
     });
  })();

});

Answer 1

当前版本的代码正在尝试将 click 事件处理程序绑定到 #userinfo，甚至在它在 DOM 中可用之前（因为元素是通过 load asynch 调用添加到 DOM 的）。

尝试这个：

$('#userinfo').load('CustomerOptions.asp', function() {
     $('#login').click(function(event){
         // something to do
     });
});

Answer 2

您可以尝试使用：

$('#userinfo').on('click','#login',function(){
    //Click logic here
});
$('#userinfo').load('CustomerOptions.asp');

Answer 3

它不起作用，因为您在 #login 出现在 DOM 之前已将其分配给它。对于这种情况，您必须使用“实时”事件。实时事件不要求目标元素存在于 DOM 中。

jQuery(document).ready(function($) {
   $('#userinfo').load('CustomerOptions.asp');

  $('#userinfo').on('click','#login',function(event){
     // something to do
  });
})();

编辑：正如@ManselUK 所指出的，不推荐使用“live”，必须使用“on”。

Answer 4

或者作为替代方案，您可以使用 .live() 而不是 .click()。

http://api.jquery.com/live/