Question

On my website I have an inline edit, for quick edit/saving. It works fine at the first run through, however, after jQuery recreates the <a> tag, it stops working. Here’s the jQuery:

$('form#notice').submit(function(e){
    e.preventDefault();
    var a = $('form#notice input[name=\'act\']').val();
    var n = $('input[name=\'notice\']').val();
    $('span#form').hide(); $('span#adminnotice').html(n).show(); $('span#edit').show();
    $.ajax({
        type: 'POST',
        data: { act:a, set:n },
        success: function(result){
            $('span#edit').html('<img src=\'./images/check.png\' />').delay(1000).fadeOut('slow',     function(){
            $(this).html('<a href=\'#\'>[edit]</a>').fadeIn('fast');
            });
        }
    });
    return false;
});

$('span#edit a').click(function(e){
    e.preventDefault();
    var input = $('span#adminnotice').text();
    var lngth = input.length;
    $('form#notice').html(
    \"<input type='text' name='notice' value='\"+input+\"' style='width:\"+((lngth+1)*6)+\"px' onkeyup=\\\"this.style.width=((this.value.length+1)*6)+'px';\\\" maxlength='256' />\" +
    \"<input type='hidden' name='act' value='adminnotice' />\" +
    \"<input type='submit' value='Update' />\"
    );
    $('span#adminnotice').hide();$('span#edit').hide().html('<img src=\'./images/saving2.gif\' />');$('span#form').show();
    return false;
});

After the first run-through, the .click() function stops working since I remove the <a>, then re-add it. I can get it to work if I duplicate the entire .click() and put it into the success: part of the AJAX, however, I know there must be something that I do not know, for I highly doubt the developers of jQuery would require the programmers to copy the same code twice.

Thanks for any assistance 😀

Answer 1

You do not need to duplicate the code, you could assign the click handler to a local variable and re-use it:

var onClick = function(e) { ... };
$('span#edit a').click(onClick);

Or just apply the handler to an element that does not get removed (the handler will still be triggered as the event propagates):

$('#containerDiv').on('click', 'span#edit a', function(e) { ... });