jquery - 处理 Bootstrap 下拉菜单的 jQueryUI Datepicker 的单击事件

Question

我有一个 Bootstrap 下拉菜单。其中我有一个用于选择日期的字段。我已停止下拉菜单事件的事件传播。

当我选择日期时，下拉菜单中的输入字段会选择相应的日期。在此事件期间，菜单状态也保持打开状态。当我从日期选择器控件更改月份和年份时，下拉菜单消失。在这种特殊情况下，我如何处理日期选择器控件的单击事件。

HTML 代码:

<div class="dropdown keep-open">
    <!-- Dropdown Button -->
    <button id="dLabel" role="button" href="#"
       data-toggle="dropdown" data-target="#" 
       class="btn btn-primary">
        Dropdown <span class="caret"></span>
    </button>

    <!-- Dropdown Menu -->
    <ul id="abc" class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <li><input type="text" id="date" name="date" ng-model="date"/>
        </li>
    </ul>
</div>

Javascript:

$(function(){
    $("#date").datepicker({ changeMonth: true,
                changeYear: true,});
});

$("#abc").click(function (event) {
        event.stopPropagation();
});

您可以在这里看到实际问题: http://jsfiddle.net/ajinkya34/PWN8h/

Answer 1

这很简单。您只需在 #ui-datepicker-div

上 stopPropagation

$("#abc, #ui-datepicker-div").click(function (event) {
    event.stopPropagation();
});