ajax删除先前定义的jquery并重新定义-jquery不处理ajax生成的内容

第一个帖子,请温柔一点。

我正在开发一个社会类型页面,通过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函数在页面加载时调用,以激活注释中的“like”按钮图释函数。

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

$('.react')调用的“react.js”javascript文件的顶部部分。reactions({:

$.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'));

但是,随着新注释的动态添加,最初声明的 “$('.react')。反应({' 功能不起作用。

作为一个解决办法,我得重复一下 “$('.react')。反应({” 对添加的每个新注释调用函数。这是有效的,但它是在每个新注释中添加的复合词,如反应代码附加到 $(正文)

所以在ajax生成的注释中,每次ajax添加新的注释时,我都会得到多个'u emolist'div

<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>

所以..

有没有办法让 “$('.react')。反应({' 打电话,然后对每个新项目再次声明?

我已经搜索过谷歌和这个网站,但找不到任何在这种情况下有效的东西

蒂亚,迈克

加载新内容后,必须重新初始化插件。但是你不要必须重新初始化 每一个 页面上的匹配元素。将匹配集限制为仅新加载的内容。

您没有显示加载新内容的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”元素。