Jquery button.click ошибка?

Question

У меня есть следующий самодельный плагин jquery:

(function($) {
    $.fn.defaultButton = function(button) {
        var field = $(this);
        var target = $(button);

        if (field.attr('type').toLowerCase() != 'text')
            return;

        field.keydown(function (e) {
            if ((e.which || e.keyCode) == 13) {
                console.log('enter');
                target.click();
                return false;    
            }
        });    
    }
})(jQuery);

Я использую это так:

$('#SignUpForm input').defaultButton('#SignUpButton');

$('#SignUpButton').click(function(e) {
    console.log('click');
    $.ajax({
        type: 'post',
        url: '<%=ResolveUrl("~/WebServices/ForumService.asmx/SignUp")%>',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: JSON.stringify({
            email: $('#SignUpEmail').val(),
            password: $('#SignUpPassword').val()
        }),
        success: function(msg) {
            $.modal.close();
        }
    });
});

Первый раз, это работает. Во второй раз ничего не происходит. Я вижу ввод и нажимаю первый раз в журнале firebug, но во второй раз я вижу только сообщение ввода. Это похоже на то, что обработчик нажатия кнопки каким-то образом незарегистрирован. Есть мысли?

Answer 1

Вы, вероятно, сбрасываете HTML, содержащий кнопку, которая воссоздает элемент <button> с нуля (без каких-либо обработчиков событий).

Чтобы исправить это, вы можете добавить обработчик событий, используя функцию live, которая будет обрабатывать событие для всех элементов, соответствующих селектору, независимо от того, когда они были созданы.

Answer 2

Не отвечая на вопрос, но вы должны сделать это цепным, так как это полезный плагин:)

(function($) {
  $.fn.defaultButton = function(selector) {
    if (this.attr('type').toLowerCase() != 'text')
        return this;
    this.keydown(function (e) {
        if ((e.which || e.keyCode) == 13) {
            console.log('enter');
            $(selector).click();
            return false;    
        }
    });
    return this; 
  }
})(jQuery);

Также обратите внимание, что this уже является объектом jQuery, не нужно его клонировать.
Делая эту вики, не стесняйтесь улучшать ее:)

Answer 3

Очень похоже на то, что в обработчике ajax success есть что-то, что модифицирует часть DOM, содержащую #SignUpButton, и, таким образом, убивает все связанные с ним обработчики событий. Попробуйте вместо этого метод live :

$('#SignUpButton').live('click', function(e) {
    ...
});