1

我正在动态创建新的列表元素。单击这些元素时，我想执行代码。该事件$("li").click()仅针对我的默认列表项触发，<li>I am a default list element</li>但不会针对任何新创建的列表项触发。请在下面查看我的代码：

<script type="text/JavaScript">
$(document).ready(function() {
    console.log('document.ready callback');

    $("input#input2").click( function() {
        console.log('input#input2.click: ' + $("input#input1").val() + ' added to list');
        $("ul").append('<li>'+$("input#input1").val()+'</li>');
    });

    $("li").click( function() {
        console.log('li.click: ' +$(this).text());
    });

    // Info
    // .on('click', function()
    // .live('click', function()
    // did not solve this problem
});<script><html>
<body>
    Enter some stuff: <input type="text" id="input1" value="stuff">
    <br>
    <input type="submit" id="input2" value="Submit stuff to List">
    <p>stuff list!</p>
    <ul>
        <li>I am a default list element</li>
    </ul>
</body>

我在这里发现了一个类似的问题，但不幸的是，这并没有解决我目前的情况。

谢谢你们！！

4

4 回答 4

4

用于动态创建元素的绑定事件，而不是单击并将事件委托给父元素或文档。您可以在此处阅读更多信息。

$(document).on("click", "li", function() {
    console.log('li.click: ' +$(this).text());
});
于 2013-03-15T17:17:14.307 回答
2

将其委托给最近的静态父级（存在于文档中）比使用document（性能方面）更好

试试这个

$("ul").on("click", "li", function() {
  console.log('li.click: ' +$(this).text());
});

您可以在此处阅读有关on()活动的更多信息

于 2013-03-15T17:19:26.737 回答
0

click 事件仅绑定到$("li")调用时选择的元素。尝试将单击事件绑定器添加到您用于添加元素的脚本中，以便在每次添加元素时绑定新的单击行为。

于 2013-03-15T17:18:47.147 回答
0

该live方法可以工作，但它被使用该on方法来创建委托所取代。您需要提供一个父元素来应用委托，以及一个选择器来过滤掉应该触发事件的元素：

$("ul").on("click", "li", function() {
于 2013-03-15T17:19:17.527 回答