将现有的单击功能重新附加到元素

Re-attach existing click function to element

本文关键字：新附加 元素 功能 单击      更新时间：2023-09-26

在我的网站上，我有一个内联编辑，用于快速编辑/保存。它在第一次运行时工作良好，但是，在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

您不需要重复代码，您可以将点击处理程序分配给本地变量并重用它：

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

或者只将处理程序应用于未被删除的元素（在事件传播时，处理程序仍将被触发）：

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

尝试使用jquery的委托。

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

描述：根据一组特定的根元素，为现在或将来与选择器匹配的所有元素的一个或多个事件附加一个处理程序。

所以你的提交可以被重写为。。。

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

$('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;
});
相关文章：