使用 Turbolinks 渲染部分轨道后 Javascript 无法正常工作

Question

Partial 包含我的列表元素，并且它有 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>

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