0

HTML、CSS、JavaScriptでToDoリストアプリを作っています。

各 to-do の後にリストされたボタンがあります (実際にはspan)。ユーザーが をクリックするspanと、現在、削除機能に渡す準備ができているスパンの ID を取得する必要があります (これはまだ書いていません)。

クリックイベントは次のとおりです。 

$(".delete").click(function(e) {
    var clickedtodelete = $(this).attr("id");
    console.log("Deleting " + clickedtodelete);
});

ページをテストするときに、クラスが のスパンをクリックする.deleteと、コンソールに次の出力が表示されますDeleting Test To-Do。しかし、何も起こりません。

ただし、最初にクリック イベントをコンソールに手動で入力すると、コンソールに正しい出力が得られます。したがって、ページからスクリプトを取得する際のエラーである可能性があります。
ただし、同じ .js ページの他のスクリプトはすべて機能します。

最後に、MIMEタイプの警告が表示されますが、影響はないと言われています。

4

2 に答える 2

0

要素が動的に追加される場合は、委任を使用する必要があります。

$(document).on("click",".delete", function (e) {
    var clickedtodelete = $(this).attr("id");
    console.log("Deleting " + clickedtodelete);
});

または、DOM の準備が整うのを待っていません。

$(function(){...});

または、body 終了タグの直前にハンドラー コードを配置することもできます。

<script>
$(".delete").click(function (e) {
    var clickedtodelete = $(this).attr("id");
    console.log("Deleting " + clickedtodelete);
});
</script>
</body>
于 2013-05-31T10:52:35.433 に答える
0

やることリストでは、アイテムが動的に生成されていると想像します。問題の原因は、バインドしたい要素が存在する前にクリックイベントがバインドされていることだと思います。次のようにjQueryのメソッドを使用してこれを解決できます。on()

$(document).on({
    click: function(e) {
        var clickedtodelete = $(this).attr("id"); 
        console.log("Deleting " + clickedtodelete);
    }
}, '.delete');

このソリューションでは、イベントはドキュメント (常に存在する) に添付され、イベントを受け取るたびにターゲットを簡単にチェックします。これにより、イベントを動的に追加できます。

于 2013-05-31T10:53:09.767 に答える