如何通过jQuery在动态div中添加非常动态的输入

问题描述：

I have php code similar to this below:

foreach ($questions as $q){
    foreach ($answers as $a)
    {
        echo '<input type="text" id="'.$a['question_id'].'_'.$a['id_answer'].'" value="'.$a['answer'].'" />';

        echo '<div id="newAnswerTextBox'.$a['question_id'].'">';
    }
    echo '<button id="addNewAnswer'.$q['id_question'].'">Add new answer</button>';
}

exemplary output:

<input type="text" id="1_1" value="question1 answer1">
<input type="text" id="1_2" value="question1 answer2">
<input type="text" id="1_3" value="question1 answer3">
<div id="newAnswerTextBox1">
<button id="addNewAnswer1">Add new answer</button>

<input type="text" id="2_4" value="question2 answer4">
<input type="text" id="2_5" value="question2 answer5">
<input type="text" id="2_6" value="question2 answer6">
<div id="newAnswerTextBox2">
<button id="addNewAnswer2">Add new answer</button>

desired extra input after clicking first button "Add new answer":

<input type="text" id="1_4" value=" ">

The main question is how to add by jquery new inputbox. I can't find similar solution I'm learning yet jquery.

I found this below but I need to add dynamic input in right div.

var num = 0;
$("#addNewAnswer").click(function() {
    num++;
    $("#newAnswerTextBox").html("<input type=\"text\" id=\"" + num + "\" />");
});

我有类似下面的PHP代码： p>

  foreach  （$问题为$ q）{
 foreach（$ answers as a a）
 {
 echo'＆lt; input type =“text”id =“'。$ a ['question_id']。'_'。  $ a ['id_answer']。'“value =”'。$ a ['answer']。'“/＆gt;'; 
 
 echo'＆lt; div id =”newAnswerTextBox'。$ a ['question_id  ''。'“＆gt;'; 
} 
 echo'＆lt; button id =”addNewAnswer'。$ q ['id_question']。'“＆gt;添加新答案＆lt; / button＆gt;'; 
} \  n  code>  pre> 
 
 示例性输出： p> 
 
 
 ＆lt; input type =“text”id =“1_1”value =“question1  answer1“＆gt; 
＆lt; input type =”text“id =”1_2“value =”question1 answer2“＆gt; 
＆lt; input type =”text“id =”1_3“value =”question1 answer3“＆gt; 
＆lt;  ; div id =“newAnswerTextBox1”＆gt; 
＆lt; button id =“addNewAnswer1”＆gt;添加新答案＆lt; / button＆gt; 
 
＆lt; input type =“text”id =“2_4”value =“question2 answer4”＆gt;  ; 
＆lt; input type =“text”id =“2_5”value =“question2 answer5”＆gt; 
＆lt; input type =“text”id =“2_6”value =“question2 answer6”＆gt; 
  ＆lt; div id =“newAnswerTextBox2”＆gt; 
＆lt; button id =“addNewAnswer2”＆gt;点击后添加新答案＆lt; / button＆gt; 
  code>  pre> 
 
 所需的额外输入 第一个按钮“添加新答案”： p> 
 
 
 ＆lt; input type =“text”id =“1_4”value =“”＆gt; 
  code>  pre  > 
 
 主要问题是如何通过jquery添加新的输入框。
我找不到类似的解决方案我正在学习jquery。 p> 
 
 
我在下面找到了这个 但是我需要在右边div中添加动态输入。 p> 
 
 
  var num = 0; 
 $（“＃addNewAnswer”）。click（function（）{
 num ++;  
 $（“＃newAnswerTextBox”）。html（“＆lt; input type = \”text \“id = \”“+ num +”\“/＆gt;”）; 
}）; 
  code  >  pre> 
  div>

答

$("button[id^='addNewAnswer']").click(function(){
  var p = new RegExp(".*?(\\d+)",["i"]);
  var questionID = parseInt(p.exec(this.id)[1]);
  var answerID = parseInt($("input[id^='"+questionID+"_']:last").attr("id").split("_")[1]);
  answerID++;
  var newTextBoxID = questionID +"_"+answerID;   
$("<input/>").attr({"type":"text","id":newTextBoxID}).insertBefore("#newAnswerTextBox"+questionID);
});

DEMO

答

Simply add tell javascript what was the last number that entered, using PHP:

foreach ($questions as $q){
    foreach ($answers as $a)
    {
        echo '<input type="text" id="'.$a['question_id'].'_'.$a['id_answer'].'" value="'.$a['answer'].'" />';

        echo '<div id="newAnswerTextBox'.$a['question_id'].'">';
    }
    echo '<script type="text/javascript">var num'.$q['id_question'].' = '.count($answers).';';
    echo '<button id="addNewAnswer'.$q['id_question'].'">Add new answer</button>';
}

Or something similar...

Good luck :)

答

First give all button a common class say add_answer

Second on click of the button add textbox to its parent div like this

var num = 0;
$(".add_answer").click(function() {
    num++;
    $(this).parent().append("<input type=\"text\" id=\"" + num + "\" />");
});

答

First of all you have to close the "newAnswerTextBox" divs. Replace the following line:

echo '<div id="newAnswerTextBox'.$a['question_id'].'" />';

And the solution of jimy is just fine.

如何通过jQuery在动态div中添加非常动态的输入

DEMO

相关推荐