Java Script Как вызвать события в динамически генерируемом списке в J Query

Question

$(document).ready(function() {


    $(".addtophundredwatchlist").click(function() {
    $.ajax({
        type : "GET",
        url : "/watchlisttophundred/",
        success : function(data){
            var raw_tag = "<ul>";
            var add_new = "Add New"
            var json_array = data.json_array;
            for (var json_count = 0; json_count < json_array.length; json_count++)
            {
                var raw_string = "<li id='watchlistitem' class='watchlistitem'>" + "<input type='button' id='watchlistbutton' class='watchlistbutton' value='*'>" + json_array[json_count].watch_list_name + "</li>"
                raw_tag = raw_tag + raw_string
            }
            raw_tag =  raw_tag + "<li id='addnew' class='addnew'>" + add_new + "</li>"
            raw_tag = raw_tag + "</ul>"
            $(".listwatchlist").html(raw_tag)
            //$(this).next().toggle();
            //alert($(".tophundredwatchlist",$(this)).html());
            //alert($(this).next().val())
            $(".tophundredwatchlist").toggle();

        }
    });
});


$(".addnew").click(function() {
    alert("Add New Clicked");
    $(".addnew").html("<input class='newwatchlisttext' name='newwatchlisttext' type='text' autocomplete='off' id='newwatchlisttext'/>")
});

$(".watchlistitem").click(function() {
    alert("Add New Clicked");
    //$(".addnew").html("<input class='newwatchlisttext' name='newwatchlisttext' type='text' autocomplete='off' id='newwatchlisttext'/>")
});

Я создал список динамически, используя Java Scipt, и я хочу, чтобы вызвать событие щелчка, как идти в обычно генерируемом HTML-списке.это то, что я пробовал до сих пор, но я не мог запустить ни одного события.Может ли кто-нибудь помочь?

Answer 1

Дайте вашему <ul> идентификатор:

var raw_tag = "<ul id='my_list_id'>";

Тогда ваш JS должен выглядеть примерно так:

$("#my_list_id").on('click', 'li.watchlistitem', function() {
    alert("Add New Clicked");
    //$(".addnew").html("<input class='newwatchlisttext' name='newwatchlisttext' type='text' autocomplete='off' id='newwatchlisttext'/>")
});

Answer 2

Попробуйте:

$('.addnew').delegate('li', 'click', function ()
{
    //add your code here
});
//OR
$('.addnew').live('click', function ()
{
    //add your code here
});

Answer 3

Вы можете добавить идентификатор для своего списка

 var raw_tag = "< ul id = \"list1\" >";

, затем получить доступ к идентификатору, чтобы добавить прослушиватель событий:

document.getElementById('list1').addEventListener('click', function();, false);