Question

我有一个使用jQuery设置文本字段值的表单。页面首次加载时表单不起作用，但在刷新页面后它确实有效为了帮助描述问题，我录制了~30秒的视频（托管在SwfCabin上）：

知道可能导致这种情况的原因是什么？我是一个jQuery newb，我不知道！

这是 jQuery代码

$(document).ready(function () {
    $(".category").each(function () {
        $(this).find("a").click(function (event) {
            event.preventDefault();
            var category = $(this).text();
            $("#post_categories").val(category);
        });
    });
});

这是 HTML表单：

<form accept-charset="UTF-8" action="/posts" class="new_post" id="new_post"
method="post">
    <div style="margin:0;padding:0;display:inline">
        <input name="utf8" type="hidden" value="&#x2713;" />
        <input name="authenticity_token" type="hidden" value="OCbmfFY1cNsaa5e+SbvcSrP0ubQTg432ECNGmvaU8bM="
        />
    </div>
    <p>
        <label for="post_title">Title</label>
        <input id="post_title" name="post[title]" type="text" />
    </p>
    <p>
        <label for="post_url">Url</label>
        <input id="post_url" name="post[url]" type="text" />
    </p>
    <p>
        <label for="post_categories">Pick a category</label>
        <input type="text" id="post_categories" />
    </p>
    <p>Available choices:</p>
    <ul>
        <li class="category"> <a href="">programming</a>

        </li>
        <li class="category"> <a href="">cats</a>

        </li>
        <li class="category"> <a href="">batman</a>

        </li>
    </ul>
    <p>
        <input name="commit" type="submit" value="Submit" />
    </p>
</form>

Answer 1

看起来很好，确保你已经包含了jQuery lib，也可以稍微优化一下代码。

$(document).ready(function() {
     $('.category a').click(function(event){
         event.preventDefault();
         var category = $(this).text();
         $("#post_categories").val(category);
     });
 });

小提琴：http://jsfiddle.net/DGW3Q/

Answer 2

我认为Arun P Johny和Farhan提供了我正在寻找的答案，但事实证明我有一个不同的问题。我正在编写的应用程序是Ruby on Rails，我没有得到关于Rails'Turbolinks如何覆盖一些jQuery功能的备忘录。

例如，默认情况下，在Rails 4.0.0中，Turbolinks会在页面加载时处理执行JavaScript。这意味着我试图使用$(document).ready(;，但Turbolinks已经劫持了这个功能。由于我还没有完全理解的原因，刷新重新启用我的jQuery脚本然后它开始工作。我想当页面刷新时，Turbolinks的$(document).ready(;版本不会被重置？

作为短期黑客，我最终通过安装RubyGem“jquery-turbolinks”来解决问题。在某些时候，我需要学习如何使用或禁用Turbolinks。也许我应该学会使用Angular或Ember :) DOM恶作剧是一种痛苦！

Ryan Bates在Episode #290 of Railscases中讨论了Turbolinks，包括如何在页面加载时执行代码。

在Rails应用程序中刷新页面之前，jQuery不会填充文本字段

2 个答案: