当我使用Turbolinks时，在渲染部分Rails之后Javascript无法正常工作

Question

部分包含我的列表元素，并且具有upvote downvote按钮。 它在第一次加载页面时正常工作，但是当我单击“加载更多”按钮时，我的upvote和downvote按钮停止工作。 但是加载更多按钮仍然有效。

以下是我的代码，我称之为部分代码

<div class="container">
    <%= render :partial => 'show' ,:locals => {:@list1 => @list1}%>
</div>
<center><button id="load-more" class ="btn btn-outline-success" >load-more</button></center>

我的JQuery请求如下：

<script>
    var last_id = 3
    var id = <%= @post.id%>
    $(document).on("turbolinks:load",function(){

        $('button#load-more').click(function (e){
            e.preventDefault();

            last_id = last_id + 2;
            console.log(last_id)
            $.ajax({
                type: "GET",
                url: $(this).attr('href'),
                data: {
                    value: last_id
                },
                dataType: "script",
            });  


        });

        $('.vote').click(function(e){

            var k = $(this).parent().attr("id")
            if(k == "upvote"){
                var ajax_path = <%= @post.id%>+"/lists/"+this.id+"/upvote"

            }
            if(k == "downvote"){
                var ajax_path = <%= @post.id%>+"/lists/"+this.id+"/downvote"
            }

            $.ajax({
                url: ajax_path,  
                method:"POST",
                data: { },
                dataType: 'script'

            });

        })

    });


    </script>

我的Rails控制器：

def show
      @post = Post.find(params[:id])
      if params[:value]
        @list1 = @post.lists.order({:upvotes => :desc},:downvotes).limit(params[:value])
      else
        @list1 = @post.lists.order({:upvotes => :desc},:downvotes).limit(3)
      end

      @comments = @post.comments.order("created_at DESC")

      respond_to do |format|
        format.html
        format.js
      end


    end

我的show.js.erb文件如下：

$('.container').html('<%= escape_javascript(render :partial => 'show' ,:locals => {:@list1 => @list1}) %>')

先感谢您。

Answer 1

尝试以下脚本

<script>
    var last_id = 3
    var id = <%= @post.id%>
    $(document).on("turbolinks:load",function(){

        $(document).on("click" , "button#load-more", function (e){
            e.preventDefault();

            last_id = last_id + 2;
            console.log(last_id)
            $.ajax({
                type: "GET",
                url: $(this).attr('href'),
                data: {
                    value: last_id
                },
                dataType: "script",
            });  


        });
        $(document).on("click" , ".vote", function(e){

            var k = $(this).parent().attr("id")
            if(k == "upvote"){
                var ajax_path = <%= @post.id%>+"/lists/"+this.id+"/upvote"

            }
            if(k == "downvote"){
                var ajax_path = <%= @post.id%>+"/lists/"+this.id+"/downvote"
            }

            $.ajax({
                url: ajax_path,  
                method:"POST",
                data: { },
                dataType: 'script'

            });

        })

    });


    </script>

如果要渲染动态部分，则需要绑定实时事件。 让我知道它是否有效