AJAX удаляет ранее определенный jquery и переопределяет заново - Jquery не работает с AJAX-сгенерированным контентом

Question

Первое сообщение, пожалуйста, будьте вежливы.

Я работаю над страницей социального типа, которая загружает новые комментарии через AJAX prepend.Например,

<div class 'comment-said'> 
COMMENT HERE
<div class 'likes'>
<a class="react" data-id="<?=$comment->id?>" data-class="Like"><span> 
Like</span></a>
</div>
</div>

При загрузке страницы вызывается функция javascript / jQuery для активации функции смайлика кнопки «Мне нравится» в комментариях.

<script type='text/javascript'>
$('.react').Reactions({
postUrl: 'addlike.php'
});
</script>

верхняя часть файла javascript'act.js ', называемая $ ('. Реаги '). Реакции ({:

$.fn.Reactions = function(options) {        
var settings = $.extend( {            
postUrl: false, 
defaultText: "Like"                                 
}, options);        
var emo_value;      
var _data_html = '<div style="position:absolute; z-index: 999;" class="_emobar" data-status="hidden"><div class="_emolist">';       
var emojis  = '<img src="emos/Like.png" class="emo" data-emo-value="Like" style="" />';     
emojis = emojis + '<img src="emos/Love.png" class="emo" data-emo-value="Love" style="" />';     
emojis = emojis + '<img src="emos/LOL.png" class="emo" data-emo-value="LOL" style="" />';   

_data_html = _data_html + emojis;       
_data_html = _data_html + '<br clear="all" /></div></div>';     

$(_data_html).appendTo($('body'));

Однако, поскольку новые комментарии динамическидобавлено, первоначально объявлено '$ ('. реаги '). Реакции ({' функция не работает.

В качестве обходного пути, я получил его, чтобы повторить "$ ('. реаги'). Реакции ({" вызов функции для каждого нового добавленного комментария. Это работает, но это сложное добавление с каждым новым комментарием, так как код Реакции добавляет к $ (body)

Таким образом, в комментариях, сгенерированных AJAX, каждый раз, когда AJAX добавляет новый комментарий, я получаю несколько '_emolist' divs

<div class 'comment-said'> 
COMMENT HERE
<div class 'likes'>
   <a class="react" data-id="<?=$comment->id?>" data-class="Like"><span> Like</span>

<div class="_emolist" style="width: 250px;"><img src="emojis/Like.svg" class="emoji" data-emoji-value="Like" style=""><img src="emojis/Love.svg" class="emoji" data-emoji-value="Love" style=""><img src="emojis/LOL.svg" class="emoji" data-emoji-value="LOL" style=""><br clear="all"></div>
<div class="_emolist" style="width: 250px;"><img src="emojis/Like.svg" class="emoji" data-emoji-value="Like" style=""><img src="emojis/Love.svg" class="emoji" data-emoji-value="Love" style=""><img src="emojis/LOL.svg" class="emoji" data-emoji-value="LOL" style=""><br clear="all"></div>
<div class="_emolist" style="width: 250px;"><img src="emojis/Like.svg" class="emoji" data-emoji-value="Like" style=""><img src="emojis/Love.svg" class="emoji" data-emoji-value="Love" style=""><img src="emojis/LOL.svg" class="emoji" data-emoji-value="LOL" style=""><br clear="all"></div>

</a>
</div>
</div>

SO..

Есть ли способ отменить '$ ('. Реаги '). Реакции ({' вызов и затем объявить его снова с каждым новым элементом?

Я искал Google и этот сайт, и не могу найти ничего, что работает в этом случае

TIA, Mike

Answer 1

Вы должны повторно инициализировать плагин после загрузки нового контента.Но вы не должны заново инициализировать его для каждого соответствующего элемента на странице.Ограничьте соответствующий набор только для недавно загруженного содержимого.

Вы не показываете код AJAX, который загружает новое содержимое, но предположительно , когда у вас есть какой-то способ идентифицироватьконкретный контейнер, в который вы загружаете этот контент, или конкретный элемент, который вы загружаете.(Если нет, вам нужно будет это сделать.)

Допустим, ради аргумента, что при загрузке нового контента у вас есть ссылка на элемент через jQuery, который однозначно идентифицирует только новый контент.Например:

let newDiv = $('.comment-said').last();

Вы можете использовать это в своем селекторе для инициализации плагина:

$('.react', newDiv).Reactions({
    postUrl: 'addlike.php'
});

Это будет соответствовать только элементам ".react" в этом элементе newDiv.Вам может даже не потребоваться отдельная переменная, вы можете более конкретно выбрать ее напрямую:

$('.comment-said').last().find('.react').Reactions({
    postUrl: 'addlike.php'
});

Или любым другим способом в jQuery для нацеливания конкретно на те элементы, на которые вы хотите нацелиться.В конечном счете, все, что вам нужно сделать при повторной инициализации плагина, - это более конкретно идентифицировать элемент (ы), который вы хотите инициализировать, а не все ".react" элементы на всей странице.