JQuery Delegate 并在函数中使用遍历选项答案

【问题标题】：JQuery Delegate and using traveral options in functionJQuery Delegate 并在函数中使用遍历选项
【发布时间】：2010-05-06 18:55:18
【问题描述】：

我无法弄清楚如何使用 JQuery 委托函数来完成我需要的工作。基本上，我需要允许用户通过选择一个按钮来动态地将面板（即 div）添加到表单中。然后，当用户单击给定面板中的按钮时，我希望能够对该面板进行某些操作（例如在此示例中更改颜色）。不幸的是，在这种情况下，对 JQuery 遍历函数的引用似乎不起作用。谁能解释一下如何达到这个效果？是否有将不同的代表绑定到每个面板作为添加的。

$('.addPanels').delegate('*', 'click', function() {  
    $(this).parent.css('background-color', 'black');  
    $('.placeholder').append('<div class="panel"><a href="#" class="addLink">Add item</a></div>');  
 });  

<div class="addPanels">  
    <div class="panel">   
        <a href="#" class="addLink">Add item</a> text</div>  
       <div class="placeholder"/>  
    </div>  
</div>

【问题讨论】：

标签： javascript jquery delegates parent

【解决方案1】：

parent 是一个方法，而不是一个属性；所以需要调用(parent())

delegate方法的第一个参数是选择器；所以你在.addPanels内的any元素上捕获了一个点击事件。

$('.addPanels').delegate('.addLink', 'click', function(event) {
    var panel = $(this).closest('div.panel');

    panel.css('background-color', 'black');
    panel.find('.placeholder:first').append('Add item');

    event.preventDefault();
});

我会选择这样做。 ("closest" documentation )

【讨论】：