Question

我正在尝试在jQuery Mobile Collapsible标题的顶部覆盖右侧的按钮，但无法触发click事件。当我单击div时，仅触发可折叠标题的click事件。如果我用一个点击监听器覆盖其他元素上的相同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/

Answer 1

这可能对你有帮助....

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

并满足下面的评论家;）这里是你需要从我的另一篇文章中获得的代码。将以下内容添加到您的“＆＃39;图标＆＃39; （或放置它的div包装器）将阻止扩展collapsible的默认行为：

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

希望它适合你！

我的帖子中有另一个问题（也可能会影响到你），但我设法获得了一个可点击的图标＆＃39;进入JQuery Mobile可折叠标题：）

jQuery Mobile可折叠标题，带有可点击的叠加层

1 个答案: