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

在我的網站上，我有一個內聯編輯，用於快速編輯/保存。它在第一次運行時運行良好，但是，在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; 
});

後的第一行程中，.click()功能停止工作，因爲我刪除了<a>，然後重新添加它。如果我複製整個.click()並將其放入AJAX的success:部分中，我可以使其工作，但是，我知道必須有一些我不知道的東西，因爲我非常懷疑jQuery的開發人員會要求程序員複製相同的代碼兩次。

感謝您的幫助：d

來源

2012-07-12 TurdPile

'$（ '身體'）。在（ '點擊'， '跨度＃編輯'，函數（）{ }）;'委託click函數過濾所有匹配'body'的元素。這將解決您的問題。 – Ohgodwhy 2012-07-12 15:33:12

你並不需要複製的代碼，你可以單擊處理分配到一個局部變量，並重新使用它：

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

或者只是應用處理程序添加到未被移除的元素（處理程序在事件傳播時仍將被觸發）：

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

來源

2012-07-12 15:34:41

這只是重新排列已經是 - 我問如何刷新綁定，所以無論''多少次刪除/添加'$（'span＃edit a'）。click（）;'will仍然工作。刷新綁定的唯一方法是重新聲明AJAX成功內的click（）嗎？ – TurdPile 2012-07-12 15:39:05

好的，謝謝！你的第二個屬於父母的固定:) – TurdPile 2012-07-12 15:43:35

嘗試使用jquery的委託。

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

說明：將一個處理程序，以一個或多個事件的選擇相匹配的，現在或將來，基於一組特定的根元素的所有元素。

所以您提交可以改寫爲類似...

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

來源

2012-07-12 15:38:08

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

來源

2012-07-12 15:40:17 Ohgodwhy

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

回答

相關問題