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是范围为#calendar的元素，而ajax收到的数据是另一组日期.dates

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

有什么方法可以在ajax请求之后在.dates元素上维护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 documentation中的.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");
});

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

4 个答案: