Question

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

之前的正文末尾

我的网页有一个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

您可以尝试使用on：

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

Answer 3

它不起作用，因为您在DOM中存在事件之前已将事件分配给#login。对于这种情况，您必须使用“实时”事件。直播活动不要求目标元素存在于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/

在jquery.load（）获取内容后，jQuery函数不起作用

4 个答案: