Question

我正在动态创建新的列表元素。单击这些元素时，我想执行代码。事件$("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>

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

你好吧！

Answer 1

对动态创建元素使用on绑定事件而不是单击并将事件委托给父元素或文档。您可以在here上了解更多信息。

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

Answer 2

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

更好

试试这个

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

您可以详细了解on()个事件here

Answer 3

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

Answer 4

live方法可行，但已使用on方法替换为创建委托。您需要提供一个父元素来应用委托，并使用一个选择器来过滤掉应该触发事件的元素：

$("ul").on("click", "li", function() {

li.click不适用于动态创建的元素

4 个答案: