0

私はウェブアプリを構築しています。この Web アプリのメイン ナビゲーションは jquery で更新されますが、更新後は jquery イベントが機能しません。

「オンボタン」には.onでバインドされたjqueryイベントがあり、クリックされるたびに段落が追加されます。「リセットボタン」は別の「オンボタン」を追加しますが、jquery イベントはそれに適用されません。

私は.onメソッドを使用して、ドキュメントの準備ができたときに 2 番目の「オン ボタン」が DOM にないことを回避しました。

簡単な例を次に示します。

jsFiddle の例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>blub</title>

<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {

        $(".reset").click(function() {
            $("nav").append('<button class="on">test</button>');
        })

        var count = 0;
        $(".on").on("click", function(){
            $(".cont").append("<p>Another paragraph! "+(++count)+"</p>");
        });

    });
</script>
</head>

<body>
    <button class="reset">reset</button>
    <nav>
        <button class="on">test</button>
    </nav>
    <div class="cont"></div>
<script>

</script>
</body>
</html>
4

3 に答える 3

2

メソッド「on」を使用すると問題が発生します。これを試してください：

<script type="text/javascript">
    $(document).ready(function() {

        $(".reset").click(function() {
            $("nav").append('<button class="on">test</button>');
        })

        var count = 0;
        $(document).on("click",".on", function(){
            $(".cont").append("<p>Another paragraph! "+(++count)+"</p>");
        });

    });
</script>

デモ

于 2013-03-12T20:34:44.073 に答える
2

.onは を直接置き換えるものではなく.live、その構文はわずかに異なります。後で DOM に追加される要素に影響を与えたい場合は、次のように使用する必要があります。

$(document).on('click', '.on', function(){
});
于 2013-03-12T20:35:50.100 に答える
0

また、この方法で非常に簡単に行うこともできます。この方法では、作成時に各ボタンにクリック ハンドラーが割り当てられます。

$(document).ready(function() {

    var count = 0;

    $(".reset").click(function() {
        $("nav").append($('<button>', {
            class: 'on',
            html: 'test',
            click: function() {
                $('.cont').append('<p>Another paragraph! ' + (++count) + '</p>');
            }
        }));
    });
});
于 2013-03-12T20:48:23.283 に答える