jquery - Call function from dynamically created element

Question

I'm wondering which is the best way to call a function for each of these element in the code below:

    for (var y=1; y <= 24; y++) {       
    $("#christmasCalendar").append("<div class='span2'><h1><a href='#' data-toggle='tooltip' class='thumbnail' title='Click to add a question for this day'>"+y+"</a></h1></div>")  
    }

Like if I want to call this function:

    $("#createChristmasDayQuiz").click(function () {
    $("#QuizGuideInfo").delay(1000).fadeIn('slow');
    $("div.infoHolder").html('<i class="fa-icon-bullhorn"></i>Select a color theme for your christmas calendar. This can be changed later.').hide().fadeIn('slow');
    $('#createQuiz').modal('show');
    });

I know they can't have the same ID, but still, which is the best solution?

Thanks in advance!

Answer 1

您可以使用 jQuery 动态创建实际的 DOM 元素，而不仅仅是使用字符串插入它们。然后你可以对它们做任何你想做的事情，包括将函数绑定到它们的点击处理程序。

例如

var myNewElement = $('<div/>').addClass('div-class').appendTo('#christmasCalendar').click(function(e) {
    alert('clicked on new element'); 
});

Answer 2

您可以将“on”事件绑定到#christmasCalendar 对象

$("#christmasCalendar").on("click", "a", function(e){
    // handle link click event.
});

这将适用于所有链接