使用 ajax 的 .val() 和 .attr("value") 的不同行为在克隆（）但未插入的元素上返回数据

Question

正如标题所示，我试图使用 $.getJSON() 请求的结果设置 .clone() 表单字段的值。所有返回值都与它们所属的表单字段的 name 属性具有相同的键。

当然，我尝试使用 .val("foo") 来处理跨浏览器/字段类型差异，但它不起作用。奇怪的是， .attr("value","foo") 确实如此。

有什么想法吗？这是预期的行为，还是未记录的怪癖？这是相关的代码片段：

function showSites(){
$.getJSON("process.php?action=showSites", function(data) {
    var items = [];
    $.each(data.sites, function(key, val) {  
        var $form = $("#addSiteForm").clone(); 
        var buttons = '<button id="getCert" class="button" href="getCert.php?id=' + val.id + '">Get Cert</button>'
            + '<button id="updateSite" class="button" href="process.php?action=updateSite&id=' + val.id + '">Update Site</button>'                                                                              
            + '<button id="deleteSite" class="button" href="process.php?action=deleteSite&id=' + val.id + '">Delete Site</button>';

        // set siteId
        $form.find("input[name=siteId]").attr("value",val.id);

        // change values
        $.each(val, function(i,v){
            $form.find("[name="+i+"]").val(v);
        });

        items.push('<h3><a href="#">' + val.name + '</a></h3>');
        items.push("<div class='site'>");
        items.push("<form class='siteForm' id='"+val.id+"'>");
        items.push($form.html());
        items.push("</form>");
        items.push(buttons);
        items.push("</div>");   
    });
    var foo = items.join('');
    $("#sites").prepend(foo).accordion("destroy").accordion();                  
});
});

Answer 1

您只能在输入标签（文本框、文本区域等）中使用 .val() 属性。

attr("attrname","value") 这用于为任何标签设置值。您可以在 div 标签中设置一些虚拟 attr 并检索值 attr("attrname");