Question

好的，所以我一直在打这个电话：

$('#FirstCategory').change(function () {
$('#result').empty();
var str = "";
$( "select option:selected" ).each(function() {
  str += $( this ).attr('id') + " ";
});
$.ajax({
    url:'/dev_integrapp/profile/product/'+str,
    type:'POST',
    dataType:'json',
    data:{parent:str},
    success:function(data){
        $('#result').append("<select id='SecondCategory'></select>");
        for(var i in data){
            var obj=data[i];
            for(var j in obj){
                var id=obj[j].id;
                var name=obj[j].name;
                $('#SecondCategory').append("<option id='"+id+"'>"+id+" - "+name+"</option>");
            }

        }
    }
});
})
 .change();

然后，如果您从第二个类别中选择其中一个选项，它将进行类似的调用以显示第三个下拉菜单，该菜单应该执行相同的操作但不会。第三个菜单永远不会让我选择任何东西。它显示了正确的选项但是如果我点击它它只是停留在第一行“选择子菜单”。可能是什么原因？

Answer 1

对于动态添加的项，您需要使用.on来绑定事件处理程序：

$('body').on('change', '#SecondCategory', function () { 

})

为什么呢？：http://api.jquery.com/on/

事件处理程序（例如.click（））仅绑定到当前选定的元素;它们必须在您的代码调用.on（）时存在。要确保元素存在且可以选择，请将脚本放在HTML标记中的元素之后，或者在文档就绪处理程序中执行事件绑定。或者，使用委派事件来附加事件处理程序。

委派事件（例如，.on（'click'））具有以下优势：他们可以处理来自稍后添加到文档的后代元素的事件。通过选择附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序。

添加多个ajax无效的下拉菜单

1 个答案: