jQuery的，不會改變的價值，但會改變其他屬性

Question

function send_mail(token, loader) { 
$(".send_mail").bind("click", function() { 
    try{ 
    var to = $(this).attr('ref'); 
    var mail_form = $("#mail_form"); 
    mail_form.find("li:eq(0) input").val("sdsds"); 
    //mail_form.find("li:eq(0) input").attr("ref", "sdsds"); 
    //mail_form.find("li:eq(0) input").attr("value", "sdsds"); 
    $.fancybox(mail_form.html(), { 'autoDimensions' : false, 'width' : 360, 'height' : 200, 'transitionIn' : 'none', 'transitionOut' : 'none', 'scrolling' : 'no', 'showCloseButton' : false }); 
    return false; 
    }catch(err){alert(err);} 
}); 
} 

我的問題是，上面還不會工作，如果我用

//mail_form.find("li:eq(0) input").attr("ref", "sdsds"); 

它會改變裁判，甚至

//mail_form.find("li:eq(0) input").attr("value", "sdsds"); 

將無法正常工作...

任何想法這是怎麼回事？

Answer 1

當分別使用val()和attr設置value屬性時，jQuery使用elem.value = ...和elem['value'] = ...。當涉及到value屬性時，這些方法不會更改實際的HTML。因此，當您創建mail_form.html()中的fancybox時，您將獲得原始value屬性值，因爲它們仍存在於HTML中。

但是，setAttribute()的確改變了底層的HTML value屬性。嘗試在將值更改爲sdsds並在致電$.fancybox(...)之前添加此項：

mail_form.find("li:eq(0) input").each(function() { 
    this.setAttribute("value",$(this).val()); 
});