委托/生活失败.不能在Prepending元素之后绑定事件

Delegate/Live Failure. Can't bind events after Prepending an element

本文关键字：元素 之后 绑定 事件 Prepending 生活 失败 不能 委托      更新时间：2023-09-26

EDIT——我意识到这里的问题是绑定到元素的点击处理程序必须在绑定另一个点击处理程序之前解除绑定。

我想允许用户通过单击所讨论的元素来选择/取消选择项。元素在"选项"框中开始，如果单击，则移动到"选定框"。如果在选定框中单击这些元素，这些元素就会移回原来的选项框。

不明白为什么delegate()和live()在这里不起作用。我认为这与prependTo()或appendTo()有关。

  $('#amen_options .options p').click(function(e){
      $(this).appendTo('#amen_selected .options');
      e.stopPropagation();
      e.preventDefault();
});
/*  
$("body").delegate('#amen_selected p', 'click', function(e){
    #(this).appendTo('#amen_options .options');
    e.stopPropagation();
    e.preventDefault();
});
*/
$('div#amen_selected div.options p').live('click',function(e){
    $(this).appendTo('#amen_options .options');
    e.stopPropagation();
    e.preventDefault();
});

标记如下:

  <div>
   <div id="amen_options">
        <h3>Click to Select</h3>
        <div class="options">
            <p data-option="">One</p>
            <p data-option="">Two</p>
            <p data-option="">Etc...</p>
                 </div>
   </div>
   <div id="amen_selected"> 
        <h3>Selected</h3>
        <div class="options">
        </div>
   </div>

第一次点击成功(将p个元素从选项发送到选定框)。但是，一旦选中，就不会绑定任何事件处理程序。firebug控制台没有显示错误。通常，我认为这是一个标记问题，但我已经反复检查过了。

谢谢!

看起来delegate()运行良好。

http://jsfiddle.net/fLXgU/1/

$('body').delegate('#amen_options .options p', 'click', function(e) {
    $(this).appendTo('#amen_selected .options');
    return false;
});
$('body').delegate('#amen_selected .options p', 'click', function(e) {
    $(this).appendTo('#amen_options .options');
    return false;
});
相关文章：