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

听起来非常像ajax success处理程序中的某些内容正在修改包含#SignUpButton的DOM部分，因此会终止与之关联的所有事件处理程序。请改用live方法：

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

Answer 2

您可能正在重置包含按钮的HTML，该按钮将从头开始重新创建<button>元素（没有任何事件处理程序）。

要解决此问题，您可以使用live函数添加事件处理程序，该函数将处理与选择器匹配的所有元素上的事件，无论它们何时被创建。

Answer 3

没有回答这个问题，但你应该把它变成可链接的，因为它是一个有用的插件：）

(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对象，无需克隆它制作这个wiki，随时改进它：）

Jquery button.click bug？

3 个答案: