Javascript not working after rendering partial rails when I used Turbolinks

Question

Partial contains my list element and it have upvote downvote buttons. It works properly at first time page loaded but when I click on load more button to then my upvote and downvote button stops working. But load more button still works.

following is my code where I call my partial

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

my JQuery request is as following:

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

my Rails controller:

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

my show.js.erb file is as following:

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

Thank you In advance.

Answer 1

Try below script

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

You need to bind live events if you are rendering dynamic partial. let me know if it is working or not