1

jQuery を学習していますが、.on()イベント ハンドラーに問題があります。done動的に追加された新しいリスト項目にクラスが追加されない理由がわかりません。任意の支援をいただければ幸いです。 jsフィドル

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
ul li{
    list-style: none;
}
.done{
    text-decoration: line-through;
    color: red;
}
.green{
    color:green;
}
</style>
</head>
<script type="text/javascript">
$(document).ready(function(){
    $('#taskText').keydown(function(evt){
        if(evt.keyCode == 13){
            addTask(this, evt);
        }
    });
    $('#addTask').click(function(evt){
        addTask(document.getElementById('taskText'), evt);
    });
//the problem is the code below//

    $('#tasks li').on("click", function(evt){
        $(this).addClass('done');
    });
});
function addTask(textBox, evt){
    evt.preventDefault();
    var taskText = textBox.value;
    $("<li>").text(taskText).appendTo('#tasks');
    textBox.value = '';
};
</script>
<body>



<ul id = "tasks">

</ul>
<input type= 'text' id ='taskText'>
<input type = 'submit' id ="addTask" />
<div class = "green"> green text</div>
</body>
</html>
4

1 に答える 1

7

イベント バインディングの後に作成された要素に対して機能するようにするには、そのオプションのselector引数.on()を指定する必要があります。

$('#tasks').on('click', 'li', function(evt){
    $(this).addClass('done');
});

APIドキュメントから直接:

イベント ハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが を呼び出す時点でページに存在している必要があります.on()。要素が存在し、選択できることを確認するには、ページの HTML マークアップにある要素のドキュメント対応ハンドラー内でイベント バインディングを実行します。新しい HTML がページに挿入されている場合は、要素を選択し、新しい HTML がページに配置された後にイベント ハンドラーを添付します。または、次に説明するように、委任されたイベントを使用してイベント ハンドラーをアタッチします。

委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベント ハンドラーがアタッチされた時点で存在することが保証されている要素を選択することで、委任されたイベントを使用して、イベント ハンドラーを頻繁にアタッチおよび削除する必要がなくなります。この要素は、たとえば、Model-View-Controller デザインのビューのコンテナー要素にすることができます。またはdocument、イベント ハンドラーがドキュメント内のすべてのバブリング イベントを監視する必要がある場合です。document 要素はhead、他の HTML をロードする前にドキュメントの で使用できるため、ドキュメントの準備が整うのを待たずに安全にイベントを添付できます。

于 2013-02-08T06:13:18.573 に答える