Question

我在主html中添加了一个可折叠按钮和一个简单的<a>元素。代码如下：

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>元素时，音频工作正常，所以看起来一切正常，除了＆＃39; .my_clicker＆＃39;没有引用我的可折叠元素，即无法找到它。所以看起来常规的jQuery引用有效但jQuery Mobile元素在某种程度上是不同的，并且不容易引用。即使我使用＆＃39; div＆＃39;而不是＆＃39; .my_clicker＆＃39;在我的$(document.body).on()函数中，仍然所有div元素都发出声音，但我的可折叠按钮却没有。（我还试过＆＃39; a＆＃39;＆＃39; h4＆＃39;而不是＆＃39; .my_clicker＆＃39;）

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

编辑：原来上面的代码实际上可以在我的平板电脑上工作（如apk），尽管不在浏览器中工作！不过，很高兴知道如何使它在浏览器中工作，因为jQuery Mobile也可以用于Web应用程序。

Answer 1

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

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

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

1 个答案: