使用jQuery级联选择框

我想与html选择框和jQuery ajax帖子级联。当我选择一个选项时，它将自己的值发送到另一个文件并获取json值。是的，我用ajax文章做这个。但在回调函数中，我将添加另一个选择框设置所有的jSON数据。而我这样做是正确的。但是当我从添加的选择框中选择一个选项jQuery的'更改'事件不处理这个新的选择框，并最终不起作用的其他功能。使用jQuery级联选择框

我的jQuery代码如下：

$(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>"); 
        } 
       } 
      } 
     }); 
    }); 
});

开始HTML代码如下：

<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 &amp; Sa?l?k</option> 
     <option value="4">Toplant? &amp; Davetler</option> 
     <option value="3">Yeme &amp; ?çme</option> 
     <option value="2">Odalar &amp; Süitler</option> 
     <option value="1">Genel Bak??</option> 
    </select> 
</div>

但在控制台当我键入跟随代码，它的运行：

$("select").change(function(){ 
     alert(2); 
});

从根选择框选择一个选项，并在上面的代码后，我输入控制台，并从新选择一个选项此代码框确实工作并显示警报消息。

来源

2013-07-16 Mesuti

在绑定时，即当您创建更改处理程序时，元素（select元素）不存在于DOM中（因为它正在动态生成）。所以它不绑定change处理程序，因为没有要绑定的元素。因此，一个简单的解决方案就是使用授权。现在，使用委托的美妙之处在于，不管元素何时创建，处理程序都被分配给元素。这应该对你有用。 PS：你应该尝试使用代表团，只要你必须在旅途中（动态地）创建元素，你应该尝试使用代表团。

来源

2013-07-16 20:45:57 user1

感谢您的回复。我研究了jQuery中的bind-live-delegate并学习了一个新主题:) – Mesuti

如果这对你有帮助，你应该考虑点击tick按钮并将其标记为答案。 :) – user1

这没有解决我的问题，但想到了一个想法。我用“委托”功能解决了这个问题。 – Mesuti

使用jQuery级联选择框

回答

相关问题