jQuery: один клик вызывает несколько событий

У меня есть форма для входа в систему, в которой есть две ссылки: Add member и Reset password. Я также использовал jQuery Ajax для обновления соответствующих div. Я работаю над Google App Engine и Python. Коды следующим образом:jQuery: один клик вызывает несколько событий

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

Проблема: когда я нажимаю на одну из кнопок, будет срабатывать несколько событий. Проблема возникает из-за неправильного использования jQuery's $('body')?

источник

2013-02-21 Sugar Tang

Почему бы просто не использовать '$ (" a.addMember "). Click (...)' и '$ (" a.resetPassword "). Click (...)'? –

Это были именно то, что я использовал раньше. Однако иногда Ajax не обновлял назначенный div; вместо этого он обновляется до целой страницы (см. http://stackoverflow.com/questions/14452952/jquery-ajax-insert-to-div-sometimes-fails). Поэтому я принял предложение Сэмюэля. Я до сих пор не знаю, почему он не работает. –

Возможно, вам лучше загружать только часть возвращаемого содержимого, например. '$ ('# content'). load (url +" body ");' так что вы не ставите '' и так далее в ваш placeholder. –

Убедитесь, что вы не используете этот код javascript более одного раза, если код загружается через ajax, что произойдет.

Быстрое исправление было бы сделать что-то вроде:

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

источник

2013-02-21 13:16:34 cernunnos

Я переделал свой вопрос, добавив описания файлов 'base.html' и' login.html'. Насколько я вижу, я не думаю, что javascript будет загружен несколько раз (весь «loginDiv» заменяется). Я ошибаюсь? –

Это сработало. Большое спасибо, cernunnos. –

Нет проблем, но обратите внимание, что если он сработает, это означает, что вы используете .on несколько раз, вам может потребоваться переместить этот javascript на контент, который не загружается через ajax. Решение в ответе не является оптимальным, его просто быстрое решение :) – cernunnos

Используйте следующий код

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

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

источник

2013-02-21 13:21:33

Я советую вам DRY код, как это:

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-21 13:24:34 moonwave99

jQuery: один клик вызывает несколько событий

ответ

Смежные вопросы