Jquery 在Ajax调用后添加表单元素

我正在构建一个表单，允许用户输入单词，当他们关闭选项卡时，我查询字典（Wordnik.com）来检索定义，并将定义作为单选按钮选择添加到表单中。javascript提取单词，调用我的WordsController中的get_definition函数并查询字典API，但我似乎无法获取要渲染的部分（现在它只是打印出“”）

PS：我还尝试直接使用jquery查询api（因此我没有使用get_definitions函数），但我无法获取要发送的请求，因此我现在坚持使用上述方法

文字/控制器：

def index
    @words = Word.where(user_id: current_user)
    @word = current_user.words.new
    @defs = Array.new
end

def get_definition
    @defs = Wordnik.word.get_definitions(params['word'])
    render nothing: true
end

javascript:

$('input#word_name').blur(function(){
    var word = $('input#word_name').val();
    $.ajax({
            url: '/words/get_definition',
            data: 'word='+word
    })
    $('#addDefinitionContainer').html("<%= escape_javascript(render partial: 'words/definitions', locals: {f: f}) %>")
})

$（'input#word_name'）.blur（函数（）{
var word=$（'input#word_name'）.val（）；
$.ajax({
url:“/words/get_definition”，
数据：'word='+word
})
$（'#addDefinitionContainer'）.html（“”）
})

_部分定义：

<% @defs.each do |definition| %>
   <div class="definition_choice">
   <%= f.label definition %>
   <%= f.radio_button :definition, "yes" %>
   </div>
<% end %>

---

问题是在.js文件中不能包含ruby代码。即使你内联js代码，你仍然会有问题

---

谢天谢地，Rails有内置库来帮助您使用ajax。看看这个：

我决定在js中手动添加表单元素，而不是用javascript呈现ruby部分。在ajax调用我的ruby方法之后，我调用以下方法作为回调：

function addDefsToForm(data){           
    $.each(data, function(index,item){
        var radio = $('<input />', { id: 'word_definition_'+index, name: 'word_definition', type: 'radio', value: item['text']});
        $('#addDefinitionContainer').append(radio);
        $('#addDefinitionContainer').append(item['text']+"<br />");
    });

};

---

我认为，由于这些添加的表单元素（单选按钮）在页面第一次呈现时不在DOM中，因此表单提交时不会查找它们。serialize函数按原样遍历表单并准备发送一个新字符串。

您需要向

$.ajax（）调用添加一个成功回调，而不是尝试在其后的行中使用服务器端代码。或者使用
$.ajax（{…}）.done（数据）{$（'addDefinitionContainer'）.html（数据）；}）您的javascript位于哪里？它在视图中是内联的吗？或者在公共目录中的单独js文件中？@nnnn我尝试在ajax调用中添加“success:function（data）{$（“#addDefinitionContainer”）.html（data）；}”，以及“$.ajax（{…}）.done（data）{$（'#addDefinitionContainer'）.html（data）；}”。后一种方法在我尝试时甚至没有调用get_definitions函数。@JonahKatz现在我只是在application.js文件中有它。如果您的jQuery版本早于
.done（）
的引入，那么
.done（）
将停止它的工作。但是
success:function（data）{…
应该可以工作。当您尝试它时，实际发生了什么？
$('form').submit(function(){
    $(this).serialize();
});