在Popover内的级联下拉列表

时间:2017-01-16 19:23:30

标签: javascript jquery html twitter-bootstrap popover

我在弹出窗口中实现下拉菜单时遇到问题。我已经查看过bootstrap文档,并尝试了解乱数据切换类以尝试使其工作,但没有发生任何事情。

在第一个链接中,我有一个级联下拉菜单,点击链接后可以使用。 LINK1

但是在这个链接中,我试图将与link1中的代码相同的内容放入popover中,并且它失去了它级联的能力。 LINK2

我已经研究过如何通过实现手动点击处理程序或使用下拉切换来解决这个问题,但是没有运气。更具体地说,我不确定是否需要将相同的类应用于其他子下拉列表,就像我对此做的那样:

 <script>
        $(document).ready(function() {

            $("#datepicker").datepicker().datepicker('setDate', new Date());

            var d = new Date();
            var n = d.getHours();


            if (n>16) {
                var disableddates = ["14-01-2017", "15-01-2017"];
            }


            function DisableSpecificDates(date) {
                var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
                return [disableddates.indexOf(string) == -1];
            }


            $( function() {
                $( "#datepicker" ).datepicker();
                $.datepicker.regional['fr'] = {
                    closeText: 'Fermer',
                    prevText: 'Précédent',
                    nextText: 'Suivant',
                    currentText: 'Aujourd\'hui',
                    monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
                    monthNamesShort: ['Janv.','Févr.','Mars','Avril','Mai','Juin','Juil.','Août','Sept.','Oct.','Nov.','Déc.'],
                    dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
                    dayNamesShort: ['Dim.','Lun.','Mar.','Mer.','Jeu.','Ven.','Sam.'],
                    dayNamesMin: ['D','L','M','M','J','V','S'],
                    weekHeader: 'Sem.',
                    dateFormat: 'dd/mm/yy',
                    firstDay: 1,
                    isRTL: false,
                    showMonthAfterYear: false,
                    beforeShowDay: DisableSpecificDates,
                    minDate: 0,
                    yearSuffix: ''},
                    $.datepicker.setDefaults($.datepicker.regional['fr']);
            });
        });
    </script>

提前谢谢。

1 个答案:

答案 0 :(得分:2)

问题是popover会在DOM中使用popover内容创建一个新div,所以在你js中你已经将click事件分配给一个从未使用过的元素。如果您检查代码,您可以看到有两个“单击此处”锚点。要解决您的问题,您必须使用其他表单分配事件。我为你创造了一个新的jsfiddle http://jsfiddle.net/nB4U6/1016/ 要将事件分配给将来创建的元素,您必须使用此表单

$(staticAncestors).on(eventName, dynamicChild, function() {});

在你的情况下我改变了这个

$(".dropdown-menu > li > a.trigger").on("click", function(e) {});

用这个

$('body').on("click",".dropdown-menu > li > a.trigger",function(e){});

该事件将绑定到已存在的主体。