自定义 jQuery Dropdown 未使用附加选项触发答案

【问题标题】：Custom jQuery Dropdown not firing with appended options自定义 jQuery Dropdown 未使用附加选项触发
【发布时间】：2014-01-19 16:56:02
【问题描述】：

对不起，如果这是一个简单的，我对 jQuery 很陌生。

我使用自定义下拉菜单代替选择框。这是脚本：

function DropDown(el) {
            this.dd = el;
            this.parentid = this.dd.attr('id');
            this.placeholder = this.dd.children('span');
            this.opts = this.dd.find('ul.dropdown > li');
            this.val = '';
            this.index = -1;
            this.initEvents();
        }
        DropDown.prototype = {
            initEvents : function() {
                var obj = this;

                obj.dd.on('click', function(event){
                    $(this).toggleClass('active');
                    return false;
                });
                obj.opts.on('click',function(){
                    var opt = $(this);
                    obj.val = opt.text();
                    obj.index = opt.index();
                    if(obj.parentid == "dd"){ //brand
                    $('#brand').val(obj.val);
                    $("#brand").trigger('change')
                    } else if (obj.parentid == "dd3") { //availibility
                    $('#availibility').val(obj.val);
                    $("#availibility").trigger('change')
                    }
                    obj.placeholder.text(obj.val);
                });
            },
            getValue : function() {
                return this.val;
            },
            getIndex : function() {
                return this.index;
            }
        }

        $(function() {

            var dd = new DropDown( $('#dd') );
            var dd2 = new DropDown( $('#dd2') );
            var dd3 = new DropDown( $('#dd3') );

            $(document).click(function() {
                // all dropdowns
                $('.wrapper-dropdown-1').removeClass('active');
            });

        });

这工作得很好，但下拉菜单之一“#dd2”通过 .append() 添加了不同的选项

点击事件不会在这些新选项上触发 - 任何建议..？

【问题讨论】：

检查您是否正在添加具有相同“ID”的新下拉菜单。如果是这样，那么您的 jquery 事件将不起作用，因为 ID 对于 html 页面应该是唯一的
如果您要动态添加具有不同 ID 的新下拉菜单，则需要将事件委托给新 ID。查看如何在 jquery 中委托事件以获得更多帮助

标签： javascript jquery onclick append html-select

【解决方案1】：

我认为“obj.opts.on('click',function(){...})” 是问题所在；我更喜欢

obj.dd.on('click', '.ul.dropdown > li', function() {
    //do your job here!
    var opt = $(this);
    obj.val = opt.text();
    obj.index = opt.index();
    if(obj.parentid == "dd"){ //brand
        $('#brand').val(obj.val);
        $("#brand").trigger('change')
    } else if (obj.parentid == "dd3") { //availibility
        $('#availibility').val(obj.val);
        $("#availibility").trigger('change')
    }
    obj.placeholder.text(obj.val);
});

因为动态元素没有绑定任何事件！

【讨论】：

感谢您的帮助 :-)