7

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

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

我的理解是rails_ujs.js捕获所有提交事件，因此在插入新表单时我不需要重新附加任何事件。但是，此表格并未被视为远程表格。即使我在rails_ujs.js一般提交事件中放入调试器，此表单也不会触发该事件。所有呈现在服务器端的表单都可以触发它。

我是否错过了必须将事件附加到动态插入的表单？

4

4 回答 4

11

事实证明，我在表单中渲染了一个表单，这导致了这个问题。我是个白痴：p

于 2013-05-17T18:47:06.637 回答
1

注入 for 后，您需要使用 jQuerylive和 rails_ujs 的handleRemote()事件将事件附加到 dom 到表单提交

$(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-17T17:13:16.867 回答
0

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

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

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

于 2013-05-17T16:52:23.110 回答
0

我不确定 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-17T16:30:56.477 回答