jquery - 无法引用动态添加的 jQuery Mobile 元素

Question

我正在添加一个可折叠按钮和一个简单的 <a>元素到我的主要 html。 代码如下:

var elements = "";

$('.button').bind('tap', function() {
    elements += "<div class='my_clicker' data-role='collapsible'><h4>heading1</h4><h4>heading2</h4></div>";
    elements += "<a href='#' class='my_clicker'>Click me!</a>";
    $(".button_container").html(elements).trigger('create');
};

$(document.body).on('tap', '.my_clicker' ,function(){
    playAudio('success');
}); 

当我点击 <a>元素音频工作正常所以看起来一切正常，除了“.my_clicker”没有引用我的可折叠元素，即找不到它。因此，常规 jQuery 引用似乎有效，但 jQuery Mobile 元素有些不同，无法轻松引用。即使我在 $(document.body).on() 中使用“div”而不是“.my_clicker”功能仍然是所有 div 元素发出声音，但我的可折叠按钮没有。 (我也试过 'a' 和 'h4' 而不是 '.my_clicker')

在浏览器中检查我的 html 元素时，当我单击可折叠元素时，表达式 ::before 被突出显示，而不是 <div>我已经添加。

编辑: 事实证明，尽管不能在浏览器中运行，但上面的代码实际上可以在我的平板电脑上运行(作为 apk)!尽管如此，还是很高兴知道如何使其在浏览器中工作，因为 jQuery Mobile 也可用于 Web 应用程序。

Answer 1

您是否尝试过使用 live() 而不是 on() ？它适用于动态创建的元素。

http://api.jquery.com/live/