JQuery未重新加载就无法在React视图中工作

我有一个基于RubyonRails的基本博客应用程序，其中包含React视图

该应用程序有两个表：帖子和评论。每个帖子都有一个评论部分。该部分最初设置为“显示：无”。每篇文章都有一个按钮。如果单击按钮，则会发生此事件，该事件将滑动切换（）以将注释部分切换到视图中：

 $(document).on('turbolinks:load', function(){

 $('.comments_view').on('click', function(){
    $(this).next().slideToggle();
    if ($(this).text() == 'Comments'){
        $(this).text('Close');
    } else {
        $(this).text('Comments');
    }
});

})

如果页面已重新加载，则此操作正常。但是，如果页面尚未重新加载，则“注释”部分将保持隐藏状态。我从检查员身上可以看出，该科是存在的。如果我手动进入css并关闭display:none，它就在那里。但是JQuery事件停止工作

这里是post组件，它包含按钮和comment_容器，这是我希望toggleSlide（）的目标部分。（两者都非常接近底部。按钮标题为“评论”。）

var Post=React.createClass({
getInitialState:函数（）{
返回{
post:this.props.post，
编辑模式：false
}
},
手动变速箱（e）{
var newPost=this.state.post
newPost.title=e.target.value
this.setState（{post:newPost}）；
},
handleAuthorChange（东）{
var newPost=this.state.post
newPost.author=e.target.value
this.setState（{post:newPost}）；
},
手征费（e）{
var newPost=this.state.post
newPost.video=e.target.value
this.setState（{post:newPost}）；
},
handleContentChange（e）{
var newPost=this.state.post
newPost.content=e.target.value
this.setState（{post:newPost}）；
},
setEditMode:function（）{
this.setState（{editMode:true}）；
},
handlePostUpdate:函数（）{
var=这个；
$.ajax({
方法：'放'，
数据：{post:that.state.post}，
url:'/posts/'+that.state.post.id+'.json'，
成功：功能（res）{
那是一个州({
邮政:res,，
编辑模式：false
});
}
});
},
handlePostDelete:函数（）{
var=这个；
$.ajax({
方法：“删除”，
url:'/posts/'+that.state.post.id+'.json'，
成功：功能（res）{
that.props.onDeletePost（that.state.post）；
}
});
},
render:function（）{
if（this.state.editMode）{
返回(
编辑文章


更新
);
}否则{
返回(
{this.props.post.title}
{this.props.post.author}
{this.props.post.content}

{this.props.post.video&&
}


删除
编辑
评论
); 
}
}
});

---

我不明白为什么JQuery停止处理这个元素，即使它看起来仍然在DOM中而没有重新加载

添加处理程序时，元素很可能不存在。尝试通过在父元素上附加处理程序来利用

基本上，替换这个

$('.comments_view').on('click', function(){
    $(this).next().slideToggle();
    if ($(this).text() == 'Comments'){
        $(this).text('Close');
    } else {
        $(this).text('Comments');
    }
});

用这个

$(document).on('click', '.comments_view', function(){
    $(this).next().slideToggle();
    if ($(this).text() == 'Comments'){
        $(this).text('Close');
    } else {
        $(this).text('Comments');
    }
});

---

你能解释一下为什么会这样吗？所以对象最初不在DOM中，明白了吗。将其更改为此语法如何允许JQuery访问新对象？单击等事件会在堆栈中冒泡：例如，单击

意味着也要单击包含它的

和可能包含
的任何对象，等等。我刚刚将处理程序添加到文档中，文档是所有元素的父级，因为所有元素都在文档中，然后仅当目标（启动事件的元素）与“.comments\u view”选择器匹配时才执行该函数。单击答案中的事件冒泡链接了解更多详细信息。

$(document).on('click', '.comments_view', function(){
    $(this).next().slideToggle();
    if ($(this).text() == 'Comments'){
        $(this).text('Close');
    } else {
        $(this).text('Comments');
    }
});