0

我想级联 html 选择框和 jQuery ajax 帖子。当我选择一个选项时，它会将自己的值发送到另一个文件并获取 json 值。是的，我用 ajax post 来做这个。但在回调函数中，我将添加另一个选择框设置所有 JSON 数据。我这样做是正确的。但是当我从添加的选择框中选择一个选项时，jQuery 'change' 事件没有处理这个新的选择框并且最终无法使用其他功能。

我的 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);
 });

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

4

1 回答 1

1

在您绑定时，即当您创建更改处理程序时，selectDOM 中不存在元素（元素）（因为它是动态生成的）。因此它不绑定任何change处理程序，因为没有要绑定的元素。因此，一种简单的解决方案是使用委托。现在，使用委托的美妙之处在于，无论何时创建元素，处理程序都会被分配给元素。这应该为您解决问题。

$(document).on('change','select', function(){
    alert('test');
});

PS：每当您必须在旅途中（动态）创建元素时，您都应该尝试使用委托。

于 2013-07-16T20:45:57.110 回答