daterangepicker 关闭父级 Bootstrap 下拉菜单答案

【问题标题】：daterangepicker close parent Bootstrap dropdowndaterangepicker 关闭父级 Bootstrap 下拉菜单
【发布时间】：2018-01-26 15:25:02
【问题描述】：

我在 Bootstrap 中有一个带有 daterangepicker 输入的下拉菜单。

我有这个代码

$(document).on('click', 'body .dropdown-menu', function (e) {
    e.stopPropagation();
});

$('#filter-expired-range').daterangepicker();

当我点击 daterangepicker 日历日输入时，一切都已关闭（daterangepicker 日历和下拉菜单）

更新1。

html代码：

<div class="btn-group mea-filters-block">
<span style="float: left; padding-top: 12px;" class="mea-info"></span>
<button type="button" class="btn dropdown-toggle btn-filter btn-link" data-toggle="dropdown"
        title="Filter">
    <i class="fa fa-filter"></i></button>
<ul class="dropdown-menu dropdown-menu-right">
    <form id="docExportFilter">
        <div class="row">
        <div class="col-sm-6" style="border-right: 1px solid #ddd">

            <p class="filterslabel"><i
                        class="fa fa-calendar-check-o"></i>
                <span>Validation date</span>
            </p>

            <div class="form-group">
                <input type="checkbox" class="" name="validDocuments" id="filter-valid">
                <label for="filter-valid">Valid documents</label>
            </div>

            <div class="form-group">
                <input type="checkbox" class="" name="expired" id="filter-expired">
                <label for="filter-valid">Expired documents</label>
            </div>

            <div class="form-group" id="filter_expired_range_container" style="display: none">
                <label for="filter-expired">Expired between dates
                    <input style="width: 100%" readonly placeholder="Any" type="text"
                           class="form-control" name="expired_range" id="filter-expired-range">
                </label>
            </div>


        </div>


        <div class="col-sm-6">
            <p class="filterslabel"><i
                        class="icon-checkmark-circle2"></i> <span>Compliance</span>
            </p>
            <div class="form-group">
                <input type="checkbox" name="compliant" class="" id="filter-compilant">
                <label for="filter-compilant">Compliant documents</label>
            </div>
            <div class="form-group">
                <input type="checkbox" name="remedialActionsRequired" class="" id="filter-remedial">
                <label for="filter-remedial">Remedial required</label>
            </div>
        </div>
            </div>

        <div class="row pt-15" style="border-top: 1px solid #ddd">
            <div class="col-sm-12 text-right">
                <a class="mea-submit btn btn-primary"><i class="fa fa-check"></i>Apply</a>
                <button class="btn btn-default" type="reset"><i class="fa fa-times"></i> Cancel</button>

            </div>
        </div>


    </form>
</ul>
</div>

更新 2。这是最小的例子 - 我看到问题是 requirejs - 如果我在没有 requirejs 的情况下测试它 - 它可以工作......

requirejs 示例（不起作用 - 选择日期关闭父级下拉菜单） https://jsfiddle.net/5wtLqxk9/2/

没有 requirejs 的示例（工作正常） https://jsfiddle.net/5wtLqxk9/1/

【问题讨论】：

标签： javascript jquery requirejs daterangepicker bootstrap-daterangepicker

【解决方案1】：

   $("div.daterangepicker").click( function(e) {
        e.stopPropagation();
    });

注意：放在 daterangepicker() 之后 https://jsfiddle.net/5wtLqxk9/4/

类似于： event bubbling in Jquery datepicker

【讨论】：

看这里我添加了这个，但在选择日期时仍然关闭 - jsfiddle.net/5wtLqxk9/3
@GregHmhmm mm 我复制/粘贴了一些错误。这应该有效。