javascript - ListView 上动态生成元素的单击事件

Question

我尝试将点击事件应用于动态生成的元素。

这个例子运行良好。 http://jsfiddle.net/PzSYM/361/

但是我的代码不起作用。 http://jsfiddle.net/EurT4/8/

这是与上面链接相同的代码。

HTML

<ul id="timer_listview" data-role="listview">
    <li class="timerList">
        <button>on</button>
        <span class='status'>play</span>
    </li>
    <li class="timerList">
        <button>on</button>
        <span class='status'>play</span>
    </li>
    <li class="timerList">
        <button>on</button>
        <span class='status'>play</span>
    </li>
</ul> </div>

JavaScript(Jquery)

var counter = 0;

$('#addButton').click(function () {
    $('#console').text('new line added');
    var text = '<li class="timerList"><button>new' + (++counter) + '</button><span class="status">play</span></li>';
    $('#timer_listview').prepend(text);
    $('#timer_listview').listview("refresh");
});

var play = 'play';
$('.timerList').on('click', 'button', function () {
    $('#console').text('clicked');

    var status = $(this).parent().find('span.status');
    if (status.text() == play) {
        status.text('pause');
        $('#console').text('Status Changed');
    }
});

CSS

.status { display: none; }

我很 panic 为什么它不起作用。 :( 感谢您阅读我的问题。

p.s 随时欢迎编辑我的文章。

<小时/>

更新 我解决了这个问题。 http://jsfiddle.net/EurT4/10/ 。 重点是使用最近的 parent 。 感谢米林德·阿南特瓦。

Answer 1

您正在动态添加元素.timerList。您需要使用:

$('#timer_listview').on('click', '.timerList', function() {
        $('#console').text('clicked');              

var status = $(this).parent().find('span.status');
if (status.text() == play) {     
    status.text('pause');        
    $('#console').text('Status Changed');              
}});