1

新しいリスト要素を動的に作成しています。これらの要素をクリックすると、コードが実行されます。イベント$("li").click()はデフォルトのリスト項目に対してのみ発生し、<li>I am a default list element</li>新しく作成されたリスト項目に対しては発生しません。以下の私のコードを見てください：

<script type="text/JavaScript">
$(document).ready(function() {
    console.log('document.ready callback');

    $("input#input2").click( function() {
        console.log('input#input2.click: ' + $("input#input1").val() + ' added to list');
        $("ul").append('<li>'+$("input#input1").val()+'</li>');
    });

    $("li").click( function() {
        console.log('li.click: ' +$(this).text());
    });

    // Info
    // .on('click', function()
    // .live('click', function()
    // did not solve this problem
});<script><html>
<body>
    Enter some stuff: <input type="text" id="input1" value="stuff">
    <br>
    <input type="submit" id="input2" value="Submit stuff to List">
    <p>stuff list!</p>
    <ul>
        <li>I am a default list element</li>
    </ul>
</body>

ここで同様の質問を見つけましたが、残念ながらそれは私の現在のケースを解決しませんでした.

ありがとうございます！

4

4 に答える 4

4

クリックの代わりに要素を動的に作成する際の bind イベントにonを使用し、イベントを親要素またはドキュメントに委任します。詳細については、こちらをご覧ください。

$(document).on("click", "li", function() {
    console.log('li.click: ' +$(this).text());
});
于 2013-03-15T17:17:14.307 に答える
2

最も近い静的な親（ドキュメントに存在する）に委任することは、document（パフォーマンスに関して）使用するよりも優れています

これを試して

$("ul").on("click", "li", function() {
  console.log('li.click: ' +$(this).text());
});

ここでon()イベントの詳細を読むことができます

于 2013-03-15T17:19:26.737 に答える
0

$("li")クリック イベントは、呼び出されたときに選択されている要素にのみバインドされています。要素の追加に使用しているスクリプトにクリック イベント バインダーを追加して、要素を追加するたびに新しいクリック動作をバインドしてみてください。

于 2013-03-15T17:18:47.147 に答える
0

メソッドは機能しますが、メソッドを使用してデリゲートを作成することliveに置き換えられます。onデリゲートを適用する親要素と、イベントがトリガーされる要素を除外するセレクターを提供する必要があります。

$("ul").on("click", "li", function() {
于 2013-03-15T17:19:17.527 に答える