添加動態按鈕

Question

我是JScript的新手...我試圖動態地添加文本框並選擇菜單到我擁有的表單中，並且我成功地使它們出現。 問題是JQuery在表單頁面上不起作用。 我可以在頁面上看到文本框，但是如果我查看源代碼，則文本框不存在。 到目前為止，我還沒有做，但是我認為在提交表單並在另一頁上獲取值時，我可能會遇到問題。 在此先感謝HTML：

<div name="Add_Interface_" id="Add_Interface_" style="display:none" class="addInt">
Add Interface 
<input type="button" name="Add_Interface_Button"id="Add_Interface_Button" value="+" onclick="addInt(this)">
</div> 

JQUERY / Jscript

var counter2 = 1;

函數addInt（button）{

var jqxhr = $.ajax({url: 'dynamicButtons.php',
type: 'post',
data: {'calladdInt': '1',
'counter2': counter2}
}).done(function(response) {
  alert(response);
  var txtbox = response;
  $(button).parents().find('.addInt').append(txtbox);
});

counter2++;
}


 $('select[name=Int_Type_1]').change(function(){
   if ($('select[name=Int_Type_1]').val() == 'Switchport'){
    $('#Switchport_Div_1').show();
   }else{
    $('#Switchport_Div_1').show();
   }
  });

Myphp的：

function addInt($counter2) {
$Int = array("select" => "Interface_Type_".$counter2, "dropdown" =>"Int_Client_Port_".$counter2, "dropdown2" => "Int_Server_Port_".$counter2, "dropdown3" => "Int_Uplink_".$counter2, "textbox" => "Int_Desc_" .$counter2, "select2" => "Int_Type_" .$counter2, 
"dropdown4" => "Switchport_" .$counter2, "dropdown5" => "Routed_Port_" .$counter2, "textbox2" => "Switchport_VLAN" .$counter2, "textbox3" => "IP_Routed_Port");
$Values = array("radio" => "Routable", "radio2" => "Not Routable", "dropdown" => "Client Port", "dropdown2" => "Server Port",
"dropdown3" => "Uplink", "dropdown4" => "Switchport", "dropdown5" => "Routed Port");

$addInterface = new Templates($Int, $Values);

$addInt = "<div name='Add_Interface_Type_" .$counter2. "' style=''> Interface type: ";
$addInt .= $addInterface->select. "<option>--Please Select--</option>";
$addInt .= $addInterface->dropdown. " Client Port </option>";
$addInt .= $addInterface->dropdown2. " Server Port </option>";
$addInt .= $addInterface->dropdown3.  " Uplink </option> </select>";
$addInt .= "<br> Description:" .$addInterface->textbox. "<br>";
$addInt .= $addInterface->select2. "<option>--Please Select--</option>";
$addInt .= $addInterface->dropdown4. "Switchport </option>";
$addInt .= $addInterface->dropdown5. "Routed Port </option> </select>";
$addInt .= "<div name='Switchport_Div_" .$counter2. "' style='display:none'> VLAN: " .$addInterface->textbox2;
$addInt .= "</div> <br><div name='Routed_Port_Div_".$counter2."' style='display:none'> IP Address:";
$addInt .= $addInterface->textbox3. "</div> </div>";

    return $addInt;

 }

if ($_POST['calladdInt'] == "1") {
echo addInt($_POST['counter2']);
}'

缺少的部分是我用php編寫的模板類。 它只是構造html標記，所有這些都有效。.如果有人需要，我可以將其發布...

Answer 1

嚴格來說，您的代碼沒有錯。

用您所說的內容，即使HTML源中不存在這些文本框，它們也會顯示在“渲染的” HTML頁面上。 這是因為響應中的HTML頁面已更改，並且您的文本框已添加。 因此，它們將不會出現在原始來源中。

另外，您關於提交中存在問題的觀察是正確的。 我不是PHP專家，但是如果涉及通過名稱和getter-setter邏輯訪問PHP代碼中的文本框值之類的事情，那將無法正常工作。

編輯：在頁面元素中作為HTML附加的任何jQuery代碼都不會執行。 此類代碼應保留在元素之外。

請注意，“動態”框的選擇器不正確。 您的選擇器僅用於select [name = Int_Type_1]。 因此，它不適用於其他對象，例如select [name = Int_Type_2]，稍后會生成。 改用類選擇器。