Как сохранить jquery после изменения ajax html?

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 и данных, полученных Аякса другой набор дат с классом .dates

, но после того, как запрос Ajax дополняет и изменяет HTML в #calendar, в JQuery на даты не работают.

Есть ли способ поддерживать jquery на элементах .dates после запроса ajax без копирования кода jquery внутри успеха ajax?

Answer 1

Вы должны использовать делегирование событий, так как вы имеете дело с динамическими элементами

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

Answer 2

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

Answer 3

Вы должны использовать делегирование событий, как вы используете динамические элементы

Изменить код в

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

Для получения более подробной информации и возможностей, читайте о .on(events [, selector ] [, data ], handler(eventObject)) m еню в jQuery documentation:

Answer 4

Использование на

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