重新將現有點擊功能附加到元素

Question

在我的網站上，我有一個內聯編輯，用於快速編輯/保存。 第一次運行時，它運行良好，但是，在jQuery重新創建<a>標記后，它將停止工作。 這是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;
});

第一次運行后，由於刪除了<a> ，然后重新添加它，因此.click()函數停止工作。 如果我復制整個.click()並將其放入success:那么我可以使它工作success: AJAX的一部分，但是，我知道必須存在一些我不知道的東西，因為我高度懷疑jQuery的開發人員是否會要求程序員兩次復制相同的代碼。

感謝您的協助：D

Answer 1

您無需復制代碼，可以將點擊處理程序分配給局部變量並重新使用它：

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

或者只是將處理程序應用於不會被刪除的元素（處理程序仍會在事件傳播時被觸發）：

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

Answer 2

嘗試使用jquery的委托。

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

說明：根據一組特定的根元素，現在或將來將與選擇器匹配的所有元素的處理程序附加到一個或多個事件。

因此，您的提交可以被重寫為類似...

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

Answer 3

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