jQuery添加 <li> 项目并单击事件答案

【问题标题】：jQuery adding <li> Item and click EventsjQuery添加 <li> 项目并单击事件
【发布时间】：2009-08-03 16:34:01
【问题描述】：

对 jQuery 来说非常新，如果在这一点上出现错误的问题，我什至不确定我是否使用了正确的措辞。

我需要根据 ListBox 的单击事件向 ul 添加一个 li 项（用户选择文本，并使用所选文本添加一个新的 li）。我需要在 li 项目上添加一个图标、标签和输入。该图标必须是“删除”图标。

如何连接函数以通过 jQuery 删除新添加的 li 项？

这是我尝试过的；

        $(function() {
        function addSelectedWordCriteria() {
            var selectedWord = $("#wsWords").val();
            $("#wsCriteriaList").append("<li><a href='#' class='wsCriteriaRemove'><span class='ui-icon ui-icon-circle-close'/></a><em class='wsFilteredWord'>" + selectedWord + "</em><input type='textbox' maxlength='200' class='wsFilteredWords'/></li>");
            $("#wsCriteriaList a:last").bind("click", "removeSelectedWordCriteria");
        };

        function removeSelectedWordCriteria() {
            $("#wsCriteriaList").selected().remove();
        }

    })

<%= Html.ListBox("wsWords", ViewData["Words"] as IEnumerable<SelectListItem>) %>    

<ul id="wsCriteriaList">    
</ul>

感谢您的任何建议。

【问题讨论】：

使用 parent().remove()，更改为 live() 并从函数名称中删除引号使这项工作有效。向所有人致敬。

标签： c# asp.net jquery

【解决方案1】：

对于您的直接问题，由于 click 事件为您提供了对发送事件的元素的引用，您可以使用它快速确定应该删除的内容：

    function removeSelectedWordCriteria() {
        $(this).parent().remove();
    }

我可能会更改此代码的其他内容：

正如 ScottE 所指出的，这可能是使用新直播功能的好地方。在您的 addSelectedWordCriteria 方法之外，您应该能够输入：
```
$("#wsCriteriaList a").live("click", "removeSelectedWordCriteria");
```
这将使您的所有 a 标签注册到相同的事件，即使它们被添加。
说到标签，我不确定你是否真的需要你的。您真正想要的只是能够单击包含删除图像的跨度。由于您实际上并没有使用链接，因此我个人会将锚标记全部取出并将点击事件直接放在跨度标记上。然后，您可以为上述实时函数提供一个类。

如果您还有其他问题，请告诉我。

【讨论】：

用过这个； $("#wsCriteriaList a").live('click', removeSelectedWordCriteria);和这个;函数 removeSelectedWordCriteria() { $(this).parent().remove();得到它的工作。谢谢！
是的...对不起，那里不必要的引号，应该更加小心我的语法。很高兴这个概念成功了。

【解决方案2】：

问题是您将点击事件与bind("click", "removeSelectedWordCriteria") 绑定，您使用的是bind 函数的data 参数。

当用户点击按钮时什么都不会发生，因为没有定义回调函数。

您应该直接传递函数引用或创建一个匿名函数作为处理程序：

$("#wsCriteriaList a").bind('click', removeSelectedWordCriteria);

或者

$("#wsCriteriaList a").click(removeSelectedWordCriteria);

或者

$("#wsCriteriaList a").click(function(){removeSelectedWordCriteria();});

【讨论】：

【解决方案3】：

您没有正确使用绑定方法 - 您的方法调用用引号括起来。

http://docs.jquery.com/Events/bind#typedatafn

【讨论】：