javascript - 检测 jQuery 移动可折叠内的按钮单击

Question

我正在使用 jQuery mobile，我试图在可折叠的内部添加一个按钮，但问题是当我单击该按钮时，单击事件不会被触发，而是该块未折叠或折叠。

我尝试了下面的代码，但它没有工作

$(document).on('pagebeforeshow', '#page', function () {
    $('#header').on('click', '#start', function (e) {
        alert("click");
        e.stopPropagation();
        e.preventDefault();
        e.stopImmediatePropagation();
    });
});

<div data-role='collapsible' data-theme='c' data-content-theme='d' data-collapsed icon='arrow-d' data-expanded-icon='arrow-u' data-iconpos='right'>
    <h4 id='header'>
    <input type='button' data-theme='c' value='Demarrer' data-mini='true' data-inline='true' data-icon='mappin' data-icon-pos='top' id='start'/>
    </h4>"
</div>

Answer 1

那是因为您的按钮存在于可折叠部分内。您可以做的是防止该部分在单击按钮时折叠，即获取单击的目标的 id，如果是 id="start"，则 e.preventDefault(); 所以是这样的：

$('#header').on('click', function (e) {
    var id = e.target.id;
    if(id=="start"){
      alert("click");
      e.stopPropagation();
      e.preventDefault();
      e.stopImmediatePropagation();
    }

});