Question

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

我想让用户通过点击相关元素来选择/取消选择项目。元素从“选项”框开始，如果单击，则移动到“选定框”。如果在所选框中单击它们，则元素将移回原始选项框。

无法弄清楚为什么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控制台没有显示错误。通常情况下，我认为这是一个标记问题，但我已经反复检查过了。

谢谢！

Answer 1

看起来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;
});

代表/现场失败。在预先添加元素后无法绑定事件

1 个答案: