代码之家  ›  专栏  ›  技术社区  ›  Chris

jquery按钮。单击bug?

  •  0
  • Chris  · 技术社区  · 15 年前

    我有以下自行开发的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日志中第一次看到Enter并单击,但第二次只看到Enter消息。这就好像按钮的单击处理程序正在以某种方式被取消注册。有什么想法吗?

    3 回复  |  直到 15 年前
        1
  •  1
  •   Darin Dimitrov    15 年前

    听起来很像Ajax success 正在修改包含 #SignUpButton 从而杀死与之相关的所有事件处理程序。尝试 live 方法代替:

    $('#SignUpButton').live('click', function(e) {
        ...
    });
    
        2
  •  1
  •   SLaks    15 年前

    您可能正在重置包含该按钮的HTML,它将重新创建 <button> 从头开始的元素(不带任何事件处理程序)。

    要解决此问题,可以使用 live 函数,它将处理与选择器匹配的所有元素上的事件,无论它们是在何时创建的。

        3
  •  1
  •   Nick Craver    15 年前

    没有回答这个问题,但是您应该使这个链接起来,因为它是一个有用的插件:)

    (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,请随意改进:)