javascript - 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 的元素，#calendar而 ajax 接收到的数据是另一组带有类的日期.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");
});

Answer 2

您需要在使用动态元素时使用事件委托

将您的代码更改为

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

有关更多详细信息和可能性，请阅读jQuery 文档.on(events [, selector ] [, data ], handler(eventObject))中的方法：

Answer 3

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

Answer 4

使用在

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