Question

您好我正在尝试使用jquery动态替换已创建的列表。但是在新创建的列表中，我无法使用任何jquery事件。

我创建了一个玩家列表

萨钦
Sourav
的Rahul

在单击任何列表名称时，它会警告其id，然后使用jquery动态替换新创建的列表。

科利
MS
Rahane

但是我无法为新创建的列表选择click事件。当我们点击任何新动态列表的名称时，它没有在控制台中显示任何错误，也没有发生任何事情。

<html>
<head>

<script src="jquery-3.1.1.js"></script>
<script>
$(document).ready(function(){
    $("#videoul li").click(function(){
         var vocab_id = $(this).attr('id');
         alert("Hi the ID is " + vocab_id);

         var aaila = '<a href="#" id="i_am_link">Click me again</a><ul id = "videoul"><li id="Kohli">Virat</li><li id="Dhoni">M S</li><li id="Rahane">Ajinkya</li></ul>';

         $('#videowrapper').html(aaila);
    });
});
</script>
</head>
<body>

<div id="videowrapper"><a href="#abc" id="i_am_link">Click me</a>
    <ul id="videoul">
        <li id="Tendulkar">Sachin</li>
        <li id="Ganguly">Sourav</li>
        <li id="Dravid">Rahul</li>
    </ul>
</div>


</body>
</html>

我现在一无所知，如何使这个工作。

Answer 1

使用“on”方法。而不是$（“body”）选择器，您可以使用非动态创建的其他元素。

// in constructor of form
       BlockedURls = new List<string>();
        BlockedUrls.Add("www.blocked.com");

Answer 2

由于您提到了动态创建的元素，因此您需要将事件委派与on

一起使用

查看此代码段

＆＃13;

$("body").on("click", "#videoul li", function(){
    var vocab_id = $(this).parent().attr('id');
    console.log("Hi the ID is " + vocab_id);
    
    var aaila = '<a href="#" id="i_am_link">Click me again</a><ul id = "videoul"><li id="Kohli">Virat</li><li id="Dhoni">M S</li><li id="Rahane">Ajinkya</li></ul>';
    
    $('#videowrapper').html(aaila);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="videowrapper"><a href="#abc" id="i_am_link">Click me</a>
    <ul id="videoul">
        <li id="Tendulkar">Sachin</li>
        <li id="Ganguly">Sourav</li>
        <li id="Dravid">Rahul</li>
    </ul>
</div>

＆＃13;

如何为动态生成的列表触发jquery click事件

2 个答案: