通過JavaScript在Rails應用程序插入數據的遠程形式，UJS不要再追遠程

我有被附加到容器上的簡單形式：通過JavaScript在Rails應用程序插入數據的遠程形式，UJS不要再追遠程

<form action="/something" data-remote="true" method="post"> 
    <input type="submit" /> 
</form>

我的理解是rails_ujs.js捕獲所有提交的事件，所以插入新表單時，我不需要重新附加任何事件。但是，這種形式並沒有被視爲一種遠程形式。即使當我在一般提交事件中將調試器放入rails_ujs.js時，此表單也不會觸發該事件。所有表單呈現服務器端觸發它沒有問題。

我錯過了將事件附加到動態插入表單的內容嗎？

來源

2013-05-17 bcardarella

我不確定rails_ujs.js是如何工作的，但我認爲你的問題在於你在客戶端添加的html內容沒有響應已綁定的事件。解決方法是，無論何時在客戶端添加新的HTML元素，您還必須將任何事件綁定到它。

請看下面的例子：

<html> 
<head> 
    <title>My Page</title> 
    <script src="jquery.js"></script> 
</head> 
<body> 
    <div id="content"> 
     <a href="#" class="link">Click me</a> 
    </div> 
    <a href="#" class="add_link">Add link</a> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.link').click(function(){ 
      alert('Click me'); 
     }); 

     $('.add_link').click(function(){ 
      $("#content").append("<a href='#' class='link'>Click me no alert...</a>"); 
     }); 
    }); 
    </script> 
</body> 
</html>

當你點擊「添加鏈接」鏈接會添加一個鏈接，說按我並具有一流的「鏈接」。但是，如果您點擊此鏈接，則不會顯示警報，即事件點擊事件不會觸發，而只會觸發服務器端生成的內容。

該解決方案更詳細的這個問題描述： In jQuery, how to attach events to dynamic html elements?

但是我不知道如何將它應用到rails_ujs，你可能需要做一些修改那裏。

來源

2013-05-17 16:30:56

rails_ujs確實使用文檔委託，而不是綁定到特定的onload元素，所以它應該選擇你的表單。

難道你的表單中沒有隱藏的auth_token字段，因此插入csrf標記失敗？或者它到了服務器，然後失敗了真實性檢查？

然後，愚蠢的問題：你確定你的調試版本的rails_ujs存在於頁面上嗎？是否加載了rails_ujs？ console.log($.rails)檢查。

來源

2013-05-17 16:52:23

這就是我的想法，這使得這非常令人沮喪地弄清楚。我的實際代碼是注入csrf標記併爲utf-8設置表單。 – bcardarella

注入了之後，您需要使用到事件附加到DOM jQuery的live &的rails_ujs的handleRemote()事件提交表單

$(function(){ 
    $("body") 
     .live('ajax:complete', function(){ 
      $("form[data-remote]").live('submit', function(e){ 
        $.rails.handleRemote($("form[data-remote]")); 
        e.preventDefault(); 
      }); 
     }); 
});

目前，這會在頁面中所有的表格，你可能希望使其更具體以提高性能。 PS：如果您使用的是最新的jQuery（jQuery 1.7或更高版本），您可能想知道在jQuery的最新版本中，live（）已被棄用，而傾向於使用on()。這裏是一個很好的解釋on() vs live()

來源

2013-05-17 17:13:16 CuriousMind

這應該是必要的嗎？ https：//開頭github上。com/rails/jquery -ujs/blob/master/src/rails.js＃L326顯示rails_ujs在文檔上使用事件委託來捕獲所有提交事件 – bcardarella

^^^不應該被需要，但是嘿，目前它不工作。所以嘗試一下，它可能會或可能不會工作。但嘗試中沒有傷害。 Incase，它不工作做回發與github上的示例應用程序，它再現了這個問題，所以我們可以進一步幫助:) – CuriousMind

好點:)我會嘗試重新創建 – bcardarella

事實證明，我是在表單內呈現一個表單，這是造成問題。我是一個白癡：p

來源

2013-05-17 18:47:06 bcardarella

真棒，我也是一個白癡:) – Nycen

太棒了，我也是。 :) – Bang

通過JavaScript在Rails應用程序插入數據的遠程形式，UJS不要再追遠程

回答

相關問題