CODEWITHSUNDEEP
javascriptjqueryonclickclick
TurdPile
TurdPile

Reputation: 1036

Re-attach existing click function to element

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 :D

Upvotes: 1

Views: 269

Answers (3)

Ohgodwhy
Ohgodwhy

Reputation: 50787

$('body')on('click', 'span#edit a', 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;
});

Upvotes: 2

Andrew McGivery
Andrew McGivery

Reputation: 1390

Try using jquery's delegate.

http://api.jquery.com/delegate/

Description: Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.

So your submit could be rewritten as something like...

$('body').delegate('#notice','submit',function(e){
//do stuff here
});

Upvotes: 2

Rich O&#39;Kelly
Rich O&#39;Kelly

Reputation: 41767

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) { ... });

Upvotes: 4

Related Questions