Question

I have the following home-grown jquery plugin:

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

I’m using it like so:

$('#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();
        }
    });
});

The first time, it works. The second time, nothing happens. I see enter and click the first time in the firebug log, but the second time I only see the enter message. It’s almost like the button’s click handler is being unregistered somehow. Any thoughts?

Answer 1

Sounds very much like there’s something in the ajax success handler that’s modifying the part of the DOM containing the #SignUpButton and thus killing all event handlers associated with it. Try the live method instead:

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