Javascript не работает после рендеринга частичных рельсов, когда я использовал Turbolinks

Question

Частично содержит мой элемент списка, и он имеет кнопки 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>

Вам необходимо связать живые события, если вы рендерите динамический фрагмент. дайте мне знать, если это работает или нет