我试图根据用户的选择逐步显示表单元素。但是如果我选择多选，则使用 .html() 函数插入的 select 元素的 id 似乎找不到。
这是我在 Fiddle 上的代码:http://jsfiddle.net/SdF4p/1/
HTML 代码:
<form id="test">
<select id="type_of_answer">
<option selected disabled>Type of answer</option>
<option value="single">Simple answer</option>
<option value="multiple">Multiple answer</option>
<option value="interval">Answer with interval</option>
</select>
<br><br>
<div id="box1">
</div>
<div id="box2">
</div>
</form>
Jquery 代码:
var nb_answer = '<select id="nb_answer"><option selected disabled>Number of answer</option><option value="2">2</option><option value="3">3</option></select>';
var single_answer = '<input id="single_answer" type="text" placeholder="Answer">';
var multiple_answer1 = '<input id="answer1" type="text" placeholder="Answer 1"><br><input id="answer2" type="text" placeholder="Answer 2"><br><input id="answer3" type="text" placeholder="Answer3">';
var multiple_answer2 = '<input id="answer1" type="text" placeholder="Answer 1"><br><input id="answer2" type="text" placeholder="Answer 2"><br>';
var interval = '<input id="interval1" type="text" placeholder="Inf"><br><input id="interval2" type="text" placeholder="Sup">';
$('#type_of_answer').change(function () {
$('#box2').html(''); //reset
if ($('#type_of_answer').val() == "single") {
$('#box1').html(single_answer);
} else if ($('#type_of_answer').val() == "multiple") {
$('#box1').html(nb_answer);
} else {
$('#box1').html(interval);
}
});
$('#nb_answer').change(function () {**//the problem is here. It is clearly not executed**
if ($('#nb_answer').val() == "2") {
$('#box2').html(multiple_answer1);
} else {
$('#box2').html(multiple_answer2);
}
});
最佳答案
由于您是动态生成元素，因此需要使用 .on() 而不是 .change():
$(document).on('change', '#nb_answer', function () {
$('#box2').html('Bouger');
if ($('#nb_answer').val() == "2") {
$('#box2').html(multiple_answer1);
} else {
$('#box2').html(multiple_answer2);
}
});
<强> jsFiddle example
关于javascript - .html() 之后找不到 Jquery id，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25109217/