Question

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

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

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

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

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

p.s随时欢迎编辑我的写作。

更新我解决了这个问题。 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>

单击listview上动态生成元素的事件

2 个答案: