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

ok so I've been working on this call:

好的,所以我一直在打这个电话:

$('#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();

Then if you select one of the options from the second category, it will make a similar call to display a third dropdown menu, which should be doing the same thing but doesn't. The third menu never let's me select anything. It shows me the right options though but if I click it it just stays in the first line which is "select sub-menu". What could be the reason?

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

1 个解决方案

#1

For the dynamically added items you need to use .on to bind event handlers:

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

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

})

Why? : http://api.jquery.com/on/

为什么? :http://api.jquery.com/on/

Event handlers (e.g., .click()) are bound only to the currently selected elements; they must exist at the time your code makes the call to .on(). To ensure the elements are present and can be selected, place scripts after the elements in the HTML markup or perform event binding inside a document ready handler. Alternatively, use delegated events to attach event handlers.

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

Delegated events (e.g., .on('click')) have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.

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

#1