Question

我有一个名为forms.php的页面，其头部包含一个javascript和一个名为fadeinContents的div 我使用Ajax将一个名为＃sections1 的文件的一部分加载到这个div中，该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提前..

Answer 1

然后你应该以不同方式绑定该事件。试试这个

  $('.fadeinContents').delegate('.login_link', 'click', function(e) {
       $('#fadeinContents').load('forms.php #sections3');                     
  });

以及其他人的等等。

这意味着click事件在.fadeinContents上绑定，但在触发时，它会检查目标是否为.login_link，如果是，则会触发给定的回调。因此，将事件处理程序委派给更高的节点将确保无论何时加载/更改节点的内容或您拥有多少元素，如果它们与事件处理程序将触发的条件匹配。

委派事件也会提高内存效率。例如，如果您要将单击事件添加到100个单元格中，执行$(".cell").click(将在每个单元格上附加事件侦听器。将它委托给body例如$("body").delegate('.cell', 'click',只会附加一个事件（然后进行一些循环并检查那里，这是真的）但是你最终只会有一个事件监听器而且它赢了“无论您以后添加或删除多少个节点。他们将触发点击事件

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

1 个答案: