使用jQuery级联选择框
我想用html选择框和jQueryAjax帖子进行级联。当我选择一个选项时,它会将自己的值发送到另一个文件并获取json值。是的,我用ajax post来做这件事。但在回调函数中,我将添加另一个选择框,用于设置所有jSON数据。我这样做是正确的。但是,当我从添加的选择框中选择一个选项时,jQuery“change”事件不会处理这个新的选择框,并且最终不会使用其他函数 我的jQuery代码如下:使用jQuery级联选择框,jquery,cascadingdropdown,Jquery,Cascadingdropdown,我想用html选择框和jQueryAjax帖子进行级联。当我选择一个选项时,它会将自己的值发送到另一个文件并获取json值。是的,我用ajax post来做这件事。但在回调函数中,我将添加另一个选择框,用于设置所有jSON数据。我这样做是正确的。但是,当我从添加的选择框中选择一个选项时,jQuery“change”事件不会处理这个新的选择框,并且最终不会使用其他函数 我的jQuery代码如下: $(document).ready(function(){ $("#kategoriler
$(document).ready(function(){
$("#kategoriler select").on('change',function(e){
var catID = $(this).val();
if($(this).next().is("select")){
$(this).nextAll("select").remove();
}
console.log($(this));
$.ajax({
async: false,
type: "POST",
url: "ajax_cate_add",
data: "catID=" + catID,
success: function(data){
if(data.length > 0){
var $parent = $("#kategoriler select:last").after("<select></select>").next();
for(var i = 0; i < data.length; i++){
$parent.append("<option value=" + data[i].id + ">" + data[i].tr_adi + "</option>");
}
}
}
});
});
});
<div id="kategoriler">
<select>
<option value="8">Rezervasyon</option>
<option value="7">E-Concierge</option>
<option value="6">Özel F?rsatlar</option>
<option value="5">Safira SPA & Sa?l?k</option>
<option value="4">Toplant? & Davetler</option>
<option value="3">Yeme & ?çme</option>
<option value="2">Odalar & Süitler</option>
<option value="1">Genel Bak??</option>
</select>
</div>
从根选择框中选择一个选项,在上面的代码之后,我在控制台中键入并从新选择框中选择一个选项,该代码确实有效并显示警报消息。在绑定时,即在创建更改处理程序时,元素(
select
元素)在DOM中不存在(因为它是动态生成的)。因此它不绑定任何change
处理程序,因为没有要绑定的元素。因此,一个简单的解决办法是使用授权。现在,使用委托的美妙之处在于,无论何时创建元素,都会将处理程序分配给元素。这应该对你有好处
$(document).on('change','select', function(){
alert('test');
});
PS:您应该尝试在需要动态创建元素时使用委派。谢谢您的回复。我研究JQuery中的Boin Lead委托并学习一个新的主题:如果这对您有帮助,您应该考虑点击TICK按钮并将其标记为答案。这并没有解决我的问题,但让我想起了一个想法。我用“委托”函数解决这个问题。
$(document).on('change','select', function(){
alert('test');
});