jquery - 单击 jQuery Mobile 可折叠集？

Question

如何绑定单击可折叠集的一个元素？

<div data-role="content">
   <div data-role="collapsible-set" data-theme="d" data-content-theme="d">
       <div data-role="collapsible" id="expand">
        <h3>header</h3>
       </div>
   </div>
</div>

尝试这个：

$(document).on('click', '#expand', function (e) {
        e.stopImmediatePropagation();
        e.preventDefault();
        console.log('ekb'); // my stuff
    });

演示：http: //jsfiddle.net/pExFF/3/

Answer 1

似乎由于 jQuery Mobile 增强功能，当您单击标题时，不会触发您绑定到 click 事件的操作。一个选项（我承认不是很漂亮）可能是在进行 JQM 增强之后将事件绑定到正确的 DOM 元素。如果您确实打算阻止默认行为（这将阻止可折叠的展开！），您可以使用这样的代码：

$(document).on('pageinit',function (f) {
  //pageinit event is triggered after the page is initialized

    $("#expand").find("*").click(function (e) {
      //apply to all descendant of your element "#expand a" selector would be sufficient to cover the header
         e.stopImmediatePropagation();
         e.preventDefault();
     console.log('ekb');
    });
});

结果在这里可见