請求ajax不會改變頁面

Question

我確實有問題。 Turbolinks熄滅 這裏創建帖子

一切工作正常。我讓我的網頁上像這樣的鏈接

<a class="unpublish" data-method="post" rel="nofollow" data-remote="true" data-id="#{@id}" href="/books/14/unpublish" >Draft</a> 

這裏是我的脫脂模板

<hr> 
<p>#{@title}</p> 
<p>#{@author}</p> 
<p>#{@description}</p> 
<div class="publishing" id="book_#{@id}"" 
    <a class="publish" href="/books/#{@id}/publish" data-method="post" rel="nofollow" data-remote="true" data-id="#{@id}">Publish</a> 
</div> 

但後來當我嘗試點擊這個鏈接沒有任何可見的發生在頁面上，但XHR與發送一個propper狀態，沒有錯誤。這對我來說是個謎。 她是我的聽衆

$('.publish').bind 'ajax:success', (e, data, status, xhr) -> 
    e.preventDefault()  
    res = $.parseJSON(xhr.responseText) 
    result = publishBooks(res) 
    alert(result) 
    book_id = "#book_" + $(this).data('id') 
    $(book_id).html(result) 

我非常需要一些幫助。任何幫助。當我重新加載頁面時，一切再次正常工作

Thaks to monsieur VKatz 我終於有一個工作ecsample！ 看起來是這樣的

ready = -> 
    createBooks = (res)-> 
     result = JST["templates/create_book"] 
     title: res.book.title 
     author: res.book.author 
     description: res.book.description 
     id: res.book.id 
    result 

    publishBooks = (res)-> 
    result = JST["templates/publish"] 
     time: res.book.published_at 
     id: res.book.id 
    result 

    unpublishBooks = (res)-> 
    result = JST["templates/unpublish"]  
     id: res.book.id 
    result 

    $('.new_book').bind 'ajax:success', (e, data, status, xhr) ->  
    res = $.parseJSON(xhr.responseText)  
    result = createBooks(res)       
    $('.drafts').append(result) 

    $('.publish').bind 'ajax:success', (e, data, status, xhr) ->  
    res = $.parseJSON(xhr.responseText) 
    result = publishBooks(res)  
    book_id = "#book_" + $(this).data('id') 
    $(book_id).html(result) 

    $('.unpublish').bind 'ajax:success', (e, data, status, xhr) -> 
    e.preventDefault() 
    alert('okko okko') 

$(document).ready(ready) 
$(document).on('page:load', ready) 
$(document).on('page:update', ready) 
$(document).on('click', '.unpublish', ready); 

現在它的工作，但只爲類未發佈？我應該爲每個課程設置這個東西，比如「發佈」等嗎？

Answer 1

您需要添加gem 'turbolinks'和app/assets/javascripts/application.js

第一種方式添加//= require turbolinks：我們不僅需要監聽DOM ready，但我們也需要傾聽'page"load'爲好。正如我的回答是尊重Jquery，因爲我不知道Coffee-Script但你可以相應地改變。

function initialize(){ 
    $('#your_id').click(function(){ 
    }); 
} 
$(document).ready(initialize); 
$(document).on('page:load', initialize); 

---

方式二：

1：您有權要求jquery-turbolinks gem在Gemfile。

2：編輯您app/assets/javascripts/application.js文件

//= require jquery 
//= require jquery.turbolinks 
//= require turbolinks 

N.B：您剛纔在js文件jquery之後添加jquery.turbolinks。

---

第三方式：在Document對象綁定事件。

function checkAlert(){ 
     // ... 
    } 
$(document).on('click', '#owner_active', checkAlert); 

希望這對你有所幫助！