jQuery:单击一次触发多个事件

I have a login form in which there are two links of Add member and Reset password. I also used jQuery Ajax to update the corresponding div's. I am working on Google App Engine and Python. The codes are as follows:

我有一个登录表单，其中有两个添加成员和重置密码的链接。我还使用jQuery Ajax更新了相应的div。我正在开发谷歌应用程序引擎和Python。代码如下:

base.html:

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

<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;
  });
});

The problem is: when I click one of the buttons, multiple events will be triggered. Does the problem come from my wrong usage of jQuery's $('body')?

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

3 个解决方案

#1

Make sure you are not running that javascript code more than once, if the code is being loaded through ajax that will happen.

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

A quick fix would be to do something like:

一个快速解决方案是:

$('body').off('click','a.resetPassword');
$('body').on('click', 'a.resetPassword', function() { ...

#2

Use following code

使用以下代码

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

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

#3

I advise you to DRY your code like this:

我建议你像这样把你的代码弄干:

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;

  });

});

You use a single class, then rely on the data-target attribute to tell js where to load href content.

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

#1