在部分渲染上执行JavaScript

我有一些JavaScript代码，我希望在用户单击其中一个文件夹后执行这些代码——它会触发show操作和show.js.erb，从而呈现部分内容

Show.js.erb在用户单击其文件夹时触发，如下所示：

$("body").append( "<%=j render :partial => 'contents', :locals => {:folder => @folder } %>" );

    <script type="text/javascript">
    d3JSON = function(){
        d3.json("/folders/<%= @folder.id %>.json", function(error, data) {
            if (error) return console.warn(error);

            var folderChildren = [],
            circle;

                            /*for (var i=0; i < data.submissions.length; i++) {
                                var submissionWords = data.submissions[i].content.split(' ').join('');
                                var size = submissionWords.length;
                                folderChildren[data.submissions[i].id] = size;
                                console.log(folderChildren);
                            };*/

            var svg = d3.select("body").selectAll("svg");

            circle = svg.selectAll("circle")
            .data(data.submissions);

            circle.enter().append("svg:a")
            .attr("xlink:href", function(d){
                return "http://localhost:3000/submissions/" + d.id;
            })
            .append("circle")
            .attr("cy", function(d) {return d.content.length * 5 + "px";})
            .attr("class", "floating")
            .attr("cx", function(d){
                return (d.content.length / 2) * 10 + "px";
            })
            .attr("r", function(d){ return (d.content.length / 2) * 1.2;});

            circle.exit().remove();

        });
    };

    d3JSON();
</script>

$（“body”）.append（“'contents'，：locals=>{:folder=>@folder}%>”；

它成功地注入了部分_contents.html.erb，如下所示：

$("body").append( "<%=j render :partial => 'contents', :locals => {:folder => @folder } %>" );

    <script type="text/javascript">
    d3JSON = function(){
        d3.json("/folders/<%= @folder.id %>.json", function(error, data) {
            if (error) return console.warn(error);

            var folderChildren = [],
            circle;

                            /*for (var i=0; i < data.submissions.length; i++) {
                                var submissionWords = data.submissions[i].content.split(' ').join('');
                                var size = submissionWords.length;
                                folderChildren[data.submissions[i].id] = size;
                                console.log(folderChildren);
                            };*/

            var svg = d3.select("body").selectAll("svg");

            circle = svg.selectAll("circle")
            .data(data.submissions);

            circle.enter().append("svg:a")
            .attr("xlink:href", function(d){
                return "http://localhost:3000/submissions/" + d.id;
            })
            .append("circle")
            .attr("cy", function(d) {return d.content.length * 5 + "px";})
            .attr("class", "floating")
            .attr("cx", function(d){
                return (d.content.length / 2) * 10 + "px";
            })
            .attr("r", function(d){ return (d.content.length / 2) * 1.2;});

            circle.exit().remove();

        });
    };

    d3JSON();
</script>

d3JSON=函数（）{
d3.json（“/folders/.json”），函数（错误，数据）{
如果（错误）返回控制台。警告（错误）；
var folderChildren=[]，
圆圈
/*对于（var i=0；i

---

我已经测试了这个JavaScript，它可以工作，但是当它被注入时，它应该与DOM中的div交互，而它没有。div在我的index.html.erb文件中，因此在注入这个JS时已经加载了div。我已经尝试了很多不同的方法来尝试让它工作，但是不幸的是没有任何建议？若我尝试通过一个部分加载一些简单的东西，比如

alert（）

，它会工作，但我猜由于DOM和js的加载顺序，这不会工作

关于DOM和js的加载顺序，您是对的。因此，您可以在

show.js.erb

中触发一个自定义事件，并在一个

js

文件中侦听该事件，然后调用

d3JSON（）那里

// show.js.erb

$("body").append( "<%=j render :partial => 'contents', :locals => {:folder => @folder } %>" ).trigger('show');

您不需要
d3JSON（）调用您的
\u contents.html.erb

试试这个