通過Jquery動態添加的表單元素僅在value屬性中設置時才發布值

Question

我有一個html表單（在php中生成），並且如果用戶從select中選擇特定值，則通過jQuery添加額外的輸入字段。

在處理頁面中，新字段的值未通過-請參見phpinfo（）的摘錄：

_POST["child"]  

Array
(
[1] => Array
    (
        [label] =>  
        [id] => 
    )

[2] => Array
    (
        [label] =>  
        [id] => 
    )

[3] => Array
    (
        [label] =>  
        [id] => 
    )

[4] => Array
    (
        [label] =>  
        [id] => 
    )

[5] => Array
    (
        [label] =>  
        [id] => 
    )

)

但是，如果我在jquery添加的html中設置value屬性，則該值會通過。 有人對此問題有經驗嗎？

有任何想法嗎？

提前致謝！

編輯：表格html：

<input type='hidden' name='orderIds' id='orderIds'/>
<input type="hidden" name="changeNums" id="changeNums"/>
<input type="hidden" name="changeIds" id="changeIds"/>
<input type='hidden' name='fromPage' id='fromPage' value='/new/admin/extra_info.php?'/>
<input type='hidden' name='table' id='table' value='extra_info'/>
 <input type="hidden" name="splitPageNum" id="splitPageNum" value=""/><div align='center'><div class='popUpS' align='center' id='popUp'><div align='right' id='closeDiv' class='off' onmouseover="this.className='offOver'" onmouseout="this.className='off'"><a class='off' href='javascript:closePopUp()'>X</a></div><div align='center'class='noticeBar'id='noticeBar'></div><br/><div id='newOrderTr'><div class='formPrompt'>Order</div><div class='formInput'><select class='formInput' name='orderNumber' id='orderNumber'><option value=''>-Select-</option><option value='1'>Before Select Kashrus</option><option value='2'>Before Select Kashrus</option><option value='3'>Before Select Kashrus</option><option value='4'>After Select Kashrus</option></select></div><br/></div><div class="formPrompt">Active</div><div class="formInput"><select class="formInput" name="Active" id="Active"><option value="">-Select-</option><option  value="Active">Active</option><option  value="Inactive">Inactive</option></select></div><br/><div class='formPrompt'>Field Label</div><div class='formInput'><input type='text' class='formInput' name='label' id='label'/></div><br/>

<div class='formPrompt'>Field Type</div><div class='formInput' id='container_fieldType'><select class='formInput' name='fieldType' id='fieldType'><option value=''>-Select-</option>
<option value='0'>Short Text</option><option value='1'>Long Text</option><option value='2'>Drop Down</option></select></div><br/><div class='formPrompt'>Is Required</div><div class='formInput' id='container_isRequired'><select class='formInput' name='isRequired' id='isRequired'><option value=''>-Select-</option>
<option value='1'>Yes</option><option value='0'>No</option></select></div><br/><div class='clearFloats' style='width:600px;text-align:center;'><input type='submit' value='Submit'/></div></div></form>

JS：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>


<script type='text/javascript'>
$('#fieldType').bind('change', function(){

    if($('#fieldType').val() == 2){
        if($('#rowId').val() != 'new'){
            getVals($('#rowId').val());
        }
        $('#container_fieldType').after('<div id="child_form">' + $('#childFormHTML').html() + "<input type='hidden' name='child_table' value='extra_info_values'/><input type='hidden' name='child_table_fields' value='label'/></div>")

    }
    else{
        if($('#child_form').html())
            if(confirm("Do you want to delete all values?"))
                $('#child_form').remove()
    }


});

function getVals(rowId){
    $.get('ajax/getVals.php?rId=' + rowId, function(data) {
        if(data != ''){
            $('#childFormHTML').html(data);
    }
    });
}


</script>

HTML添加：

<div id='childFormHTML' style='display:none;'>
<br class='clear:both;'/><div class='formPrompt'>Value</div>
<div class='formInput'><input type='text' id='child[1][label]' value=' ' name='child[1][label]' class='formInput'/><input type='hidden' name='child[1][id]'/></div>
<br class='clear:both;'/><br class='clear:both;'/>
<div class='formPrompt'>Value</div>
<div class='formInput'><input type='text' id='child[2][label]' value=' ' name='child[2][label]' class='formInput'/>   <input type='hidden' name='child[2][id]'/></div>
<br class='clear:both;'/><br class='clear:both;'/>
<div class='formPrompt'>Value</div><div class='formInput'><input type='text' id='child[3][label]' value=' ' name='child[3][label]' class='formInput'/>
<input type='hidden' name='child[3][id]'/></div>
<br class='clear:both;'/><br class='clear:both;'/>
<div class='formPrompt'>Value</div>
<div class='formInput'><input type='text' id='child[4][label]' value=' ' name='child[4][label]' class='formInput'/><input type='hidden' name='child[4][id]'/></div>
<br class='clear:both;'/><br class='clear:both;'/>
<div class='formPrompt'>Value</div><div class='formInput'><input type='text' id='child[5][label]' value=' ' name='child[5][label]' class='formInput'/><input type='hidden' name='child[5][id]'/></div><br class='clear:both;'/></div>

Answer 1

由於您的html是動態插入的，因此您需要使用：

$（“＃form-container”）。delegate（“ form”，“ submit”，function（event）{}）;