在ListView上动态生成的元素的Click事件

Question

我试图将click事件应用于动态生成的元素。

这个例子很好用。 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 {显示：无； }

我感到恐慌，为什么它不起作用。 :(感谢您阅读我的问题。

ps任何时候都欢迎编辑我的作品。

---

更新我解决了这个问题。 http://jsfiddle.net/EurT4/10/ 。 重点是使用最接近的父级。 感谢Milind Anantwar。

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');              
}});

Answer 2

<script>
function onclickButton(e)
{
   alert(e+"Clicked");
}
</script>
<button onclick="onclickButton(1)">Button1</button>
<button onclick="onclickButton(2)">Button2</button>
<button onclick="onclickButton(3)">Button3</button>
<button onclick="onclickButton(4)">Button4</button>