在ajax加载的内容中对div执行Jquery

frerum 发布于 2019-03-09 javascript 最后更新 2019-03-09 14:42 0 浏览

我有一个名为forms.php的页面,其头部包含一个javascript,一个名为fadeinContents

的div 我使用Ajax将一个名为#sections1的文件的一部分加载到该div中,该文件运行得非常好

但是我需要在点击时在fadeinContents中加载的内容上执行一些Jquery。我读过其他帖子,但无法理解他们.. 这是我的文件 搜索结果forms.php

<html>
  <head>
    <script type="text/javascript" src="scripts/scripts.js"></script>
    <script type="text/javascript" src="scripts/login.js"></script>
  </head>
  <body>
   <div class="login_link">login</div>
   <div class="signup_link">signup</div>
<div class="fadeinContents">
        <!--Loaded contents goes here -->
    </div>
</html>
这是我的Jquery
$(document).ready(function(e) {
    $('#fadeinContents').load('forms.php #sections1');
$('.login_link').click(function(e) {
        $('#fadeinContents').load('forms.php #sections1');
    });
$('.signup_link').click(function(e) {   
        $('#fadeinContents').load('forms.php #sections2');
    });
$('.recoverPassword').click(function(e) {
        $('#fadeinContents').load('forms.php #sections3');                     
    });
});
加载文件包含
<div class="sections1">
    <div class="signup">
          <!-- Signup Forms Here -->
    </div>
</div>
<div class="sections2">
    <div class="login">
          <!-- loginForms Here -->
    </div>
</div>
<div class="sections3">
    <div class="recoverPassword">
          <!-- recover form Here -->
    </div>
</div>
点击 我的问题是,恢复密码点击功能无法正常工作,因为它已加载,请如何使这项工作? 预先thnx ..
已邀请:

hea

赞同来自:

那么你应该以不同方式绑定该事件。试试这样吧

  $('.fadeinContents').delegate('.login_link', 'click', function(e) {
       $('#fadeinContents').load('forms.php #sections3');                     
  });
对于其他人来说等等。 这意味着click事件在.fadeinContents上绑定,但在触发时,它会检查目标是否为.login_link,如果是,则会触发给定的回调。因此,将事件处理程序委派给更高的节点将确保无论何时节点的内容将加载/更改或您拥有多少元素,如果它们与事件处理程序将触发的条件匹配。 委派事件也有点内存效率。例如,如果您要将单击事件添加到100个单元格中,则执行$(".cell").click(将在每个单元格上附加事件侦听器。例如,使用$("body").delegate('.cell', 'click',将其委托给body只会附加一个事件(然后进行一些循环并检查那里,这是真的)但是你最终只会有一个事件监听器,你以后添加的节点数也无关紧要或删除。他们将触发该点击事件