jquery在post后无法正常工作
我在POST后使用.on()方法时出现问题。 我有3个下拉菜单,每个下拉菜单在第一个菜单改变后填充。 当我更改第一个下拉列表时,其他列表会根据mysql数据库表重新填充。 问题是第二个下拉菜单的分离功能不能单独工作。 这里的HTML:jquery在post后无法正常工作
<div class="form-group row">
<div class="col-md-4">
<label for="inputIlha">Ilha</label><select name="ilha" class="form-control" id="inputIlha">
<option value="1">Santa Maria</option>
<option value="2">São Miguel</option>
<option value="3">Terceira</option>
<option value="4">Graciosa</option>
<option value="5">São Jorge</option>
<option value="6">Pico</option>
<option value="7">Faial</option>
<option value="8">Flores</option>
<option value="9">Corvo</option>
</select>
</div>
<div class="col-md-4">
<label for="inputConcelho">Concelho</label>
<select name="concelho" class="form-control" id="inputConcelho">
<option value="0"></option>
</select>
</div>
<div class="col-md-4">
<label for="inputFreguesia">Freguesia</label>
<select name="freguesia" class="form-control" id="inputFreguesia">
<option value="0"></option>
</select>
</div>
</div>
和jQuery功能成功地重新填充所有的下拉菜单:
$("#inputIlha").on("change", function() {
var inputIlha = document.getElementById("inputIlha").value;
$.post(config.base + "xxxx/xxxxxx/xxx01", { ilha: inputIlha }, function(result) {
$("#inputConcelho").replaceWith(result);
var inputConcelho = document.getElementById("inputConcelho").value;
$.post(config.base + "xxxx/xxxxxx/xxx02", { concelho: inputConcelho }, function(result) {
$("#inputFreguesia").replaceWith(result);
});
//$("#inputFreguesia").html('<option value="0"></option>');
}
);
});
此功能重新填充第二(#inputConcelho)和第三(#inputFreguesia)下拉列表正确。基于#inputConcelho成功重新填充#inputFreguesia。
问题是当我想更改#inputConcelho。下一个功能将不起作用。
$("#inputConcelho").on("change", function() {
alert("inputConcelho changed");
var inputConcelho = document.getElementById("inputConcelho").value;
$.post(config.base + "xxxx/xxxxxx/xxx02", { concelho: inputConcelho }, function(result) {
$("#inputFreguesia").replaceWith(result);
});
});
我试图添加警报来查看是否有任何回应,但不成功。我甚至试过这种简单的功能:
$("#inputConcelho").click(function() {
alert("inputConcelho changed");
});
每次我改变第一个下拉列表(#inputIlha)的下拉菜单都重新填充。 但是,当我只改变第二个dropwdown(#inputConcelho),我没有任何警报或任何东西。 任何想法可能是什么问题?我甚至尝试在第二个下拉列表中添加一个类,然后在该类中调用它,但没有成功。希望我明确自己。
在此先感谢。
由于您正在替换第二个select元素,因此添加到这些元素的处理程序将丢失。
它与Event binding on dynamically created elements?相同。
所以你需要在这里使用event delegation。
$("#inputConcelho").parent().on("change", '#inputConcelho', function() {
alert("inputConcelho changed");
var inputConcelho = document.getElementById("inputConcelho").value;
$.post(config.base + "xxxx/xxxxxx/xxx02", {
concelho: inputConcelho
}, function (result) {
$("#inputFreguesia").replaceWith(result);
});
});
相反的处理程序绑定到#inputConcelho
,它绑定到元素的父
谢谢。像魅力一样工作。使用.html()而不是像Pierre-Chanel所回答的替换方法会是一种更好的做法吗? – JonnyDevv 2014-10-10 10:50:30
@JonnyDevv是的...如果你能控制脚本,那会更好 – 2014-10-10 10:53:58
我认为你不应该使用.replaceWith()
功能,因为它取代所有元素(从DOM中删除)。使用更好的.html(result)
并更改服务器发送的结果,以便只有<option>
元素。
可能重复的[动态创建的元素上的事件绑定?](http://*.com/questions/203198/event-binding-on-dynamically-created-elements) – JJJ 2014-10-10 10:36:28