Rails，JavaScript在下一條記錄時不起作用

Question

在我的顯示頁面上，我有一個鏈接，可將用戶帶到下一條記錄，當用戶單擊該鏈接時，將加載下一頁，但是直到刷新頁面后，我的JavaScript才起作用

模型

...

def next_question
    self.class.where("id > ?", id).first
end

...

調節器

...

def show
    @question = Question.find(params[:id])
end

...

視圖

...

<div class="row" id="yes_no">
    <div class="col-xs-10 col-md-8 col-xs-offset-1 col-md-offset-2">
        <div id="y_n_buttons">
            <%=link_to yesvote_question_path(@question, yes: true), remote: true, method: :post, id:"yes_button" do%>
                <p>YES</p>
            <% end %><%=link_to yesvote_question_path(@question, yes: false), remote: true, method: :post, id:"no_button" do%>
                <p>NO</p>
            <% end %>
        </div>
    </div>
</div>

<%= link_to("Next", @question.next_question) if @question.next_question %>

使用Javascript（jQuery的）

window.onload = function() {
$( "#yes_button" ).click(function() {
  $( "#y_n_buttons" ).slideUp( "slow", function() {
  });
});
$( "#no_button" ).click(function() {
  $( "#y_n_buttons" ).slideUp( "slow", function() {
  });
});

}

Answer 1

頁面加載時，您的按鈕會綁定click事件。 但是，當您單擊下一頁按鈕並且新加載的DOM不會綁定click事件時，您需要使用on綁定事件，而不是click

window.onload = function() {
$( "#yes_button" ).click(function() {
  $( "#y_n_buttons" ).slideUp( "slow", function() {
  });
});
$( "#no_button" ).click(function() {
  $( "#y_n_buttons" ).slideUp( "slow", function() {
  });
});
}

至

$(function(){
  $(document).on('click', "#yes_button", function() {
    $("#y_n_buttons").slideUp( "slow", function() {
    });
  });
  $(document).on('click', "#no_button", function() {
    $("#y_n_buttons").slideUp( "slow", function() {
    });
  });
})