Question

当我在Bootstrap 3中单击分段按钮的插入符号时，我无法捕获click事件。我很确定没有触发任何事件，但我真的想了解原因。这真让我抓狂。我在Firefox和Chrome上测试过这个并没有用。我还没有使用早期版本的Bootstrap测试它。

小提琴：http://jsfiddle.net/40frLqyg/1/

HTML

<div class="form-group ">
    <div class="input-group">
        <div class="input-group-btn ov-grp-div">
            <button tabindex="-1" class="ovtarget-btn btn btn-default" type="button">
                Action
            </button>
            <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li class="ov"><a href="#"> Action-1</a></li>
                <li class="ov"><a href="#"> Action-2</a></li>
            </ul>
        </div>
        <input type="text" class="form-control" placeholder="Select Category">

    </div>
</div>

<div id="clickLogger">
</div>

的jQuery

$(document).on("click", function(event) {
    $("#clickLogger").append("Clicked<BR>");
});

由于

Answer 1

将触发器应用于下拉列表而不是插入符号：

 $(document).on("click", ".dropdown-toggle", function(event) {
    $("#clickLogger").append("Clicked<BR>");
});

如果在插入符号上，鼠标必须位于顶部以触发它，但鼠标可能只是在侧面。缩小http://jsfiddle.net/40frLqyg/8/

Answer 2

您可以使用

$(document).on("click",`.caret` ,function(event) {
    $("#clickLogger").append("Clicked<BR>");
});

Jsfiddle

或

$(document).on({
    click: function (event) {
        $("#clickLogger").append("Clicked<BR>");
    }
}, `.caret`);

Jsfiddle

单击分段按钮的插入符号不会触发单击事件

2 个答案: