如何觸發jquery click事件以動態生成列表

Question

嗨，我正在嘗試使用jquery動態地用新列表替換已經創建的列表。 但是在新創建的列表上，我無法使用任何jquery事件。

我已經創建了球員名單

薩欽
蘇拉夫
拉胡爾

在單擊任何列表名稱時，它會警告其ID，然后使用jquery動態替換一個新創建的列表。

科利
女士
拉漢

但是我無法為新創建的列表選擇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”）選擇器，您可以使用其他不是動態創建的元素。

$('body').on('click', '#videoul li', 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);
});

Answer 2

由於您提到了動態創建的元素，因此需要將事件委托與on一起使用

查看此片段

 $("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); });

 <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>

如何觸發jquery click事件以動態生成列表

問題描述

2 個解決方案

解決方案1
1 2017-01-16 19:23:54

解決方案2
0 已采納 2017-01-16 19:19:44

如何觸發jquery click事件以動態生成列表

問題描述

2 個解決方案

解決方案1 1 2017-01-16 19:23:54

解決方案2 0 已采納 2017-01-16 19:19:44

解決方案1
1 2017-01-16 19:23:54

解決方案2
0 已采納 2017-01-16 19:19:44