0

我正在尝试在 jQuery Mobile 可折叠标题顶部的右侧覆盖一个按钮，但无法触发单击事件。当我点击 div 时，只会触发可折叠表头的点击事件。如果我使用单击侦听器将相同的 div 覆盖在其他元素上，我可以让它工作（参见 jsfiddle），但不能在可折叠标题的顶部。我怎样才能使这项工作？

这是HTML代码...

<div data-role="collapsible">
  <h2>Heading
    <div class="clickable" id="clickable">Click</div>
  </h2>
  <p>Content</p>
</div>

...以及添加侦听器的 JavaScript ...

$(document).on('click', '#clickable', function (e) {
  alert('clickable');
});

...最后使用的 CSS ...

.clickable {
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  right: 0px;
  top: 0px;
  background-color: #fff;
  z-index: 1000;
}

这是一个演示：http: //jsfiddle.net/nmp4Lrnt/

4

1 回答 1

1

这可能会帮助你......

https://stackoverflow.com/questions/30954896/jquery-mobile-collapsible-header-link-selection-results-in-header-selection-high

为了满足下面的批评者；）这是您需要的我的另一篇文章中的一段代码。将以下内容添加到您的“图标”（或围绕它的 div 包装器）将阻止展开可折叠的默认行为：

$("#clickable").bind("click", function (e) {
       e.stopImmediatePropagation();
       e.stopPropagation();
       e.preventDefault();

希望这对你有用！

我的帖子中有另一个问题（这也可能会影响你），但我已经设法在 JQuery Mobile 可折叠标题中添加了一个可点击的“图标”:)

于 2015-06-20T14:32:55.857 回答