Question

我有一个简单的表单被附加到容器中：

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

我的理解是rails_ujs.js捕获了所有提交事件，因此在插入新表单时我不需要重新附加任何事件。但是，此表单不会被视为远程表单。即使我在rails_ujs.js上将调试器放在常规提交事件上，此表单也不会触发该事件。所有表单都呈现服务器端触发没问题。

我是否遗漏了必须将事件附加到动态插入表单的内容？

Answer 1

事实证明，我正在表单中呈现一个表单并导致问题。我是个白痴：p

Answer 2

注入for后，需要使用jQuery的live＆amp;将事件附加到dom。 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()

的一个很好的解释

Answer 3

我不确定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，你可能需要在那里进行一些修改。

Answer 4

rails_ujs确实使用文档委派，而不是绑定到特定元素onload，因此它应该选择你的表单。

可能是表单中没有隐藏的auth_token字段，因此插入csrf令牌失败了吗？或者它将进入服务器，然后无法进行真实性检查？

然后，这个愚蠢的问题：你确定你的调试版本的rails_ujs出现在页面上吗？是否加载了rails_ujs？ console.log($.rails)要检查。

通过JavaScript在Rails应用程序中插入数据远程表单，不会捕获远程

4 个答案: