javascript - 如何将 Jquery UI 从图像中的单击委托(delegate)给列表项？

Question

我有一个 UL，其中包含用户可以单击并从一个列表移动到另一个列表的项目。我有一个功能来检查列表项并将其从一个列表移动到另一个列表，并且它运行良好 - 除了一个问题。

列表项包含一个图像(也响应单击事件)。因此，如果我的用户单击图像(本质上是代表添加/删除的 + 或 - 号)，则该功能将不起作用，因为它期望作为目标的元素是图像，而不是列表项。如何将图像点击委托(delegate)给包含它的 li？

列表项是使用struts2迭代器构建的

        <li class="ui-widget-content" id="<s:property value="userId"/>">
            <img src="/images/add_16.png" border="0" alt="add"/>
            <s:property value="firstName"/>&nbsp;<s:property value="lastName"/>
        </li>   

我试过这个...

$("#ul-available li").delegate("img", "click", function(){
        $(this).click();
    });

...认为如果我单击图像，我可以简单地调用列表项上的单击事件，但它不起作用。任何我做错了什么的想法，或者任何其他关于如何实现这一目标的想法将不胜感激。

感谢任何/所有回复!

Answer 1

内部 .delegate() this指的是 <img>不过，您需要爬到 <li> ...使用 .closest() 是一个很好的方法，像这样:

$("#ul-available").delegate("li img", "click", function(){
  $(this).closest("li").click();
});

.delegate() 也是为了捕获点击，所以最好放在<ul>上而不是每个<li> ，我在上面做了这个调整。