0

在乞讨时，我有一个 ul：

<div id="ul1DivId">
    <ul id="ul1Id">
        <li>li1</li>
    </ul>
</div>

比我有一个 javascript 将隐藏这个 div/ul 并添加另一个具有另一个 ul 的 div：

$(document).ready(function () {
$("#ul1Id > li").click(function() {
                    //to prevent scroll firing this handler:
        event.preventDefault();

        $("#ul1DivId").hide();
        var someValue = "someValue";
        var outputUl2Html = "<div id=\"ul2DivId\">" +
        "<ul id=\"ul2Id\">" +
        "<li id=\"liXId\">> " + someValue + "</li>" +
        "<li id=\"clearLiId\">-clear-</li>" +
        "</ul>" +
        "</div>";
        //show ul 2
        $(outputUl2Html).insertAfter('#ul1DivId');

});
});

比我style="display: none; "用id="ul1DivId". 这是意料之中的。我在隐藏的 div 元素之后得到了新插入的 div。这也是意料之中的。

我有另一个 javascript 在单击时永远不会被触发clearLiId：

$(document).ready(function () {
    $("#clearLiId").click(function() {
        //I never reach here!!!!
    });
});

#ul2Id > li我也尝试过#ul2Id > #clearLiId作为选择器。当我点击#clearLiId li! 为什么？如何让它捕捉点击事件？我想再次显示第一个 div ( ul1DivId) 并删除当前 div ( ul2DivId)。

4

2 回答 2

2

您必须使用live()函数，因为选择器尚不存在。

为现在和将来匹配当前选择器的所有元素附加一个事件处理程序。

$(document).ready(function () {
    $("#clearLiId").live(function() {
        //I never reach here!!!!
    });
});
于 2012-06-19T13:18:10.713 回答
2

您缺少event参数，并且需要如下委托事件：

$(document).on('click', '#clearLiId', function() {
     //I never reach here!!!!
});


$("#ul1Id > li").click(function(event) {...
                                 ^ ----- missing event

笔记

我似乎虽然$("#ul1Id > li").为你的第一个工作，ul但它不适用于未来的uls。因此，如果您分配class给每个ul（已经在 DOM 中并且将来会出现）并更改您的选择器会更好。例如：

HTML

<div id="ul1DivId">
    <ul id="ul1Id" class="someClassToUl">
        <li>li1</li>
    </ul>
</div>

jQuery

$(".someClassToUl > li")...
于 2012-06-19T13:19:04.783 回答