0

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

我使用 Ajax 将一个名为#sections1的文件的一部分加载到这个 div 中，效果很好

但是我需要在加载的内容上执行一些 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提前..

4

1 回答 1

1

那么您应该以不同的方式绑定该事件。像这样试试

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

以此类推。

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

委派事件也更节省内存。例如，如果您有一百个要添加单击事件的单元格，则执行 a$(".cell").click(将在每个单元格上附加一个事件侦听器。将其委托给body例如 with$("body").delegate('.cell', 'click', 只会附加一个事件（然后在那里进行一些循环和检查，这是真的），但您最终只会得到一个事件侦听器，以后添加或删除多少节点都没有关系. 他们将触发该点击事件

于 2013-04-11T16:50:57.470 回答