如何在ajax更改html后维护jquery？

Question

基本上我有一些像这样的jquery:

$(".dates").on("mouseover", function(){
        $(this).css("background-color","red");
    });
    $(".dates").on("mouseout", function(){
        $(this).css("background-color", "white");
    });

在这段代码下面,我得到了一个更改其父元素内容的ajax请求:

$.ajax({
        url : "includes/calendar.php",
        type : "POST",
        data : {
            "count" : count
        },
        success : function(data){
            $('#calendar').html(data);
    }

类.dates是带有id的span中的元素#calendar,ajax接收的数据是带有class的另一组日期.dates

但是在ajax请求完成并更改html后#calendar,日期中的jquery不再有效.

有没有办法.dates在ajax请求之后维护元素上的jquery 而不复制ajax成功中的jquery代码？

Answer 1

您需要使用事件委派,因为您正在处理动态元素

$('#calendar').on("mouseover", ".dates", function () {
    $(this).css("background-color", "red");
}).on("mouseout", ".dates", function () {
    $(this).css("background-color", "white");
});