[英]Javascript not working after rendering partial rails when I used Turbolinks
部分包含我的列表元素,並且具有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}) %>')
先感謝您。
嘗試以下腳本
<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>
如果要渲染動態部分,則需要綁定實時事件。 讓我知道它是否有效
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.