0

我有一个页面并在 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
     });
  })();

});
4

4 回答 4

1

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

尝试这个：

$('#userinfo').load('CustomerOptions.asp', function() {
     $('#login').click(function(event){
         // something to do
     });
});
于 2012-07-17T16:56:00.097 回答
1

您可以尝试使用：

$('#userinfo').on('click','#login',function(){
    //Click logic here
});
$('#userinfo').load('CustomerOptions.asp');
于 2012-07-17T16:56:47.963 回答
0

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

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

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

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

于 2012-07-17T16:58:19.913 回答
-1

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

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

于 2012-07-17T16:56:51.550 回答