Re-attach existing click function to element

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

$('body').on('click', 'span#edit a', function(){ }); Delegate the click function to filter to all elements that match within the body. This will resolve your issue. — Ohgodwhy
– Ohgodwhy, Commented Jul 12, 2012 at 15:33

Rich O'Kelly · Accepted Answer · 2012-07-12 15:34:41Z

4

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

answered Jul 12, 2012 at 15:34

Rich O'Kelly

41.8k9 gold badges87 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TurdPile Over a year ago

This is just rearranging what already is - I'm asking how to refresh the bindings so no matter how many times the <a> is remove/added the $('span#edit a').click(); will still work. Is the only way to refresh bindings is to re-declare the click() inside the AJAX-success ?

TurdPile Over a year ago

Okay THANKS! your second one pertaining to the parent fixed it :)

Andrew McGivery · Accepted Answer · 2012-07-12 15:38:08Z

2

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

answered Jul 12, 2012 at 15:38

Andrew McGivery

1,4008 silver badges21 bronze badges

Comments

Ohgodwhy · Accepted Answer · 2012-07-12 15:40:17Z

2

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

answered Jul 12, 2012 at 15:40

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

Collectives™ on Stack Overflow

Re-attach existing click function to element

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related