Javascript 当我使用 Turbolinks 渲染部分 rails 后不工作
Javascript not working after rendering partial rails when I used Turbolinks
部分包含我的列表元素,它有赞成反对票按钮。它在第一次加载页面时正常工作,但是当我点击加载更多按钮时,我的赞成票和反对票按钮停止工作。但是加载更多按钮仍然有效。
以下是我调用部分
的代码
<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>
渲染动态局部需要绑定直播事件。让我知道它是否有效
部分包含我的列表元素,它有赞成反对票按钮。它在第一次加载页面时正常工作,但是当我点击加载更多按钮时,我的赞成票和反对票按钮停止工作。但是加载更多按钮仍然有效。
以下是我调用部分
的代码<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>
渲染动态局部需要绑定直播事件。让我知道它是否有效