1

我有一个登录表单，其中有 和 的两个Add member链接Reset password。我还使用 jQuery Ajax 来更新相应的 div。我正在研究 Google App Engine 和 Python。代码如下：

base.html：

...
<div id="loginDiv">{% include "login.html" %}</div>
...

登录.html：

<a href="/login?arg1=resetPassword" class="resetPassword">Reset Password</a>
<a href="/addMember" class="addMember">Add member</a>

$(document).ready(function() {
  // Add member
  $('body').on('click', 'a.addMember', function() {
    var url = $(this).attr('href');
    $('#content').load(url);
      return false;
  });
  // Reset password
  $('body').on('click', 'a.resetPassword', function() {
    var url = $(this).attr('href');
    $('#loginDiv').load(url);
      return false;
  });
});

问题是：当我单击其中一个按钮时，将触发多个事件。问题是否来自我对 jQuery 的错误使用$('body')？

4

3 回答 3

1

如果代码是通过 ajax 加载的，请确保您没有多次运行该 javascript 代码。

快速解决方法是执行以下操作：

$('body').off('click','a.resetPassword');
$('body').on('click', 'a.resetPassword', function() { ...
于 2013-02-21T13:16:34.940 回答
1

使用以下代码

$("a.resetPassword").click(function(){
                                        // Write your logic here
                                     });

$("a.addMember").click(function(){
                                        // Write your logic here
                                     });
于 2013-02-21T13:21:33.110 回答
1

我建议您像这样干燥您的代码：

HTML：

<a href="/login?arg1=resetPassword" class="loadLink" data-target="#loginDiv">Reset Password</a>
<a href="/addMember" class="loadLink" data-target="#content">Add member</a>

jQuery：

$(function() {

  $('body').on('click', 'a.loadLink', function(e) {

    e.preventDefault();
    var $this = $(this);
    $( $this.data('target') ).load($this.attr('href'));
    return false;

  });

});

您使用单个类，然后依靠data-target属性告诉 js 在哪里加载 href 内容。

于 2013-02-21T13:24:34.993 回答