使用jQuery html动态添加嵌入式ruby

我正在使用jQuery和Ajax动态地将内容加载到我的页面中，我希望将Rails链接附加到要添加的每个对象。我生成数据列表的代码是：

$.each(data.recipients, function(index, object){
    $("#recipient-list").append("<div id=\""+ object.id +"\" class=\"recipient-list-item "+ object.recipient_type +"\">" + object.email + "<br/> </div>");
});

$.each（data.recipients，函数（索引，对象）{
$（“#收件人列表”）。追加（“+object.email+”
）；
});

我想实现的是添加一个链接，该链接将删除所选项目。例如，

是否可以使用jQuery将此代码添加到页面中，还是需要使用html？我已经在一些地方看到了escape_javascript的用法，但就我所知，它是在

js.erb

文件中使用的

任何帮助都将不胜感激。

您的直觉是正确的：）

如果您是从控制器（而不是资产）提供js文件，那么您应该可以访问所有Rails视图帮助程序（link_to等）。显然，将

.erb

附加到文件名，以便呈现调用知道首先使用erb解析它

比如说

$.each(data.recipients, function(index, object){
   $("#recipient-list").append("<%= link_to "Remove", delete_mail_recipient_path(object.id), method: :delete, data: {confirm: "You sure?"} %>");
});

---

根据文档，对于ajax链接，link to的用法是：

link_to("Destroy", "http://www.example.com", :method => :delete, :confirm => "Are you sure?")
# => <a href='http://www.example.com' rel="nofollow" data-method="delete" data-confirm="Are you sure?">Destroy</a>

像rails中的URL帮助程序一样使用它

---

HTH

所以我使用jQuery解决了这个问题：这是我在jQuery端的删除代码：

// deletes a mail recipient
function delete_recipient(element){
    target = element.attr("target");
    var confirm_delete = confirm("Are you sure you want to remove this recipient?")
    if (confirm_delete){
        $.ajax({
            url: '/delete_mail_recipient',
            type: 'delete',
            dataType: 'json',
            data: {
                id: target
            },
            dataType: 'json',
            success: function(data){
                if (data.result){
                    console.log(target);
                    $("#"+target).remove();
                }else{
                    alert("Sorry something went wrong when trying to delete that recipient.");
                }
            }
        });
    }
}

    // saves the configuration of the mails recipients
    $('#save-config').click(function(){
        var form = $('form#mail-form');
        var valuesToSubmit = $('form#mail-form').serialize();
        console.log(valuesToSubmit);            // 
        save_mail_configuration(valuesToSubmit, form)
    });

这是我为页面上我想删除的动态对象设置id的代码：

$.each(data.recipients, function(index, object){
    $("#recipient-list").append("<div id=\""+ object.id + "\" class=\"recipient-list-item "+ object.recipient_type +"\">" + object.email + "<a class=\"remove-recipient\" target=\""+ object.id + "\" > Remove</a><br/> </div>");
});

$.each（data.recipients，函数（索引，对象）{
$（“#收件人列表”）。追加（“+object.email+”删除
）；
});

嘿，谢谢你的回复，我只是想知道你知道如何指定要删除的对象吗？当我在a href中使用这个数据方法=“delete”data confirm=“you sure？”时，显示的模型调用了它的delete方法以及我指定的路径。根据文档，ajax链接的link to用法是：link_to（“Destroy”，“”，：method=>：delete，：confirm=>“you sure？”）\#=>“rel=“nofollow”数据方法=“删除”数据确认=“确定吗？”>销毁

// deletes a mail recipient
function delete_recipient(element){
    target = element.attr("target");
    var confirm_delete = confirm("Are you sure you want to remove this recipient?")
    if (confirm_delete){
        $.ajax({
            url: '/delete_mail_recipient',
            type: 'delete',
            dataType: 'json',
            data: {
                id: target
            },
            dataType: 'json',
            success: function(data){
                if (data.result){
                    console.log(target);
                    $("#"+target).remove();
                }else{
                    alert("Sorry something went wrong when trying to delete that recipient.");
                }
            }
        });
    }
}

    // saves the configuration of the mails recipients
    $('#save-config').click(function(){
        var form = $('form#mail-form');
        var valuesToSubmit = $('form#mail-form').serialize();
        console.log(valuesToSubmit);            // 
        save_mail_configuration(valuesToSubmit, form)
    });

$.each(data.recipients, function(index, object){
    $("#recipient-list").append("<div id=\""+ object.id + "\" class=\"recipient-list-item "+ object.recipient_type +"\">" + object.email + "<a class=\"remove-recipient\" target=\""+ object.id + "\" > Remove</a><br/> </div>");
});