单击 jQuery Mobile 可折叠集？答案

【问题标题】：Click on jQuery Mobile collapsible-set?单击 jQuery Mobile 可折叠集？
【发布时间】：2013-01-09 10:48:32
【问题描述】：

如何绑定点击collapsible-set的一个元素？

<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/

【问题讨论】：

它似乎工作正常。你希望它做什么？
它不显示 console.log
单击“hh”部分会在 osx 的 chrome 中的两个 safari 中记录“ekb”。你用的是什么操作系统/浏览器？
你的小提琴很好..它显示了 chrome 中的 console.log..
我需要按标题点击

标签： jquery jquery-mobile click

【解决方案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');
    });
});

结果可见here

【讨论】：