通过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不要再追远程

回答

相关问题