如何在Ruby on Rails中添加表單元素的onchange監聽器？

我正在Ruby on Rails中編寫一個表單，並希望有一個調用Javascript函數的選擇框。在窗體文件，這是我使用的嘗試添加選擇框行：如何在Ruby on Rails中添加表單元素的onchange監聽器？

<%= f.select :question_select, Question.all, :prompt => "New Question", :onchange => "displayQuestion(this)" %>

在我的application.js文件，我只是有：

function displayQuestion(link) { 
    alert("Changed question"); 
}

我要成爲動態地將這些表單元素添加到頁面中，所以我不能僅僅在application.js文件中使用jQuery來將函數添加到特定的表單元素。誰能告訴我我做錯了什麼？

來源

2012-11-28 Dylan

正如你可能知道，Rails 3中大力鼓勵UJS（不顯眼的JavaScript），這基本上意味着JavaScript並繁重，而你不應該配合你的客戶端交互與表單生成。我建議在這裏做一些非常類似的事情 - 僅僅因爲你動態添加元素並不意味着你不能使用jQuery來監視它們的變化。

在模板：

<%= f.select :question_select, Question.all, {prompt: "New Question"}, data: { question: true } %>

這將創建類似如下：

<select id="..." data-question="true"> 
    ... 
</select>

然後，在JavaScript中，你可以在任何元素上使用事件代表團觀看change事件與data-question集關於整個文件：

$(function() { 
    $(document).on('change', '[data-question]', function() { 
    // this == the element that fired the change event 
    alert('Changed question'); 
    }); 
});

注意：不要使用data-question的，你可以簡單地添加一個類的元素，然後修改您的jQuery來使用這個類：

$(function() { 
    $(document).on('change', '.question', function() { 
    // this == the element that fired the change event 
    alert('Changed question'); 
    }); 
});

我一般都儘量在使用CSS選擇器的最小化我JavaScript，以便設計師可以隨意將它們更改爲任何他們想要的內容而不會破壞事物，但它同樣適用。

來源

2012-11-28 08:40:05

爲什麼......，數據：{question：true}而不是例如'...，'data-question'=> true'？ – 244an

在這種情況下，它們是相同的。但是在像這樣的散列的情況下：Rails將會執行data-question-id =「10」data-other-thing =「asdf」'，很好。 –

select_tag :variable, options_from_collection_for_select(:all, :id, :name), :onchange => 'your_onchange_handler()'

來源

2012-11-28 08:37:19

如何在Ruby on Rails中添加表單元素的onchange監聽器？

回答

相關問題