1

との2つのリンクがあるログインフォームがありAdd memberますReset password。また、jQueryAjaxを使用して対応するdivを更新しました。私はGoogleAppEngineとPythonに取り組んでいます。コードは次のとおりです。

base.html：

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

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

問題は、ボタンの1つをクリックすると、複数のイベントがトリガーされることです。問題は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 に答える