document.ready не работает с загруженным содержимым ajax

Question

Я использую ajax для загрузки сообщений на сайте WordPress.

Внутри каждого сообщения у меня есть скрытый div с кнопками обмена, который не скрывается функцией jquery toggleClass.

Это действительно просто.

$(document).ready(function(){ 
    $(".sharing-mp").click(function() {  
     $(".sharing-mp").toggleClass('sharing-mp-hidden').toggleClass('sharing-mp-visible'); 
    });  
}); 

Проблема заключается в том, что не работает на должности, которые загружаются с использованием AJAX, я думаю, потому что они, добавленные к DOM и .ready функции не найти их? Есть ли другой способ сделать это?

Answer 1

Чтобы связать событие click для динамически загружаемых элементов, вы должны использовать on(). Вы можете делегировать событие родительскому элементу, к которому элементы добавлены динамически или документально оформлены.

$(document).ready(function(){ 
    $(document).on("click", ".sharing-mp", function() {  
     $(".sharing-mp").toggleClass('sharing-mp-hidden').toggleClass('sharing-mp-visible');  
    });  
}); 

Answer 2

Вам, вероятно, нужен только один из этих классов.

shared-mp-hidden и share-mp-visible звук, как будто они просто противоположны друг другу. Таким образом, у вас будет display: none;, а другой display:block;. Вместо 2 классов вы можете установить значение по умолчанию для display:block;

Также есть функции jquery для показа и скрытия, которые делают то же самое.

Answer 3

Да, вы должны использовать делегирование событий с обработчиком .on() его родительскому объекту, который был доступен во время загрузки страницы. Это может быть сам $(document), потому что он является родительским элементом для всех других элементов, или вы можете попытаться делегировать событие ближайшему доступному родительскому объекту, который был доступен по адресу doc ready, например, для разделителя содержимого или контейнера контента и т. Д.

Тем не менее это будет работать:

$(document).ready(function(){ 
    $(document).on('click', '.sharing-mp', function() {  
     $(this).toggleClass('sharing-mp-hidden sharing-mp-visible'); 
    });  
});