フロントエンド:イベントダイナミックバインドの原理と重複バインドの問題

14160 ワード

先端 javascript

次のコードはデフォルトでjQueryを導入しています.
次のようになります.

<script type="text/javascript">
    $(function(){
        $("input").click(function(){
            $("#addbtn").append("");
            
            $("#addbtn").on("click", "input", function(){
                console.log("bbb");
            });
        });
    });
</script>

<body>
    <input value="aaa" type="button">
    <div id="addbtn"></div>
</body>

aaaボタンをクリックするたびにbbbボタンが生成されます.aaaを2回クリックして2つのbbbボタンが生成されると、bbbボタンをクリックするたびに2回「bbb」が印刷されます.
jsが変更された場合:

$(function(){
    $("input").click(function(){
        $("#addbtn").append("");
        
        $("#addbtn input").on("click", function(){
            console.log("bbb");
        });
    });
});

または

$("input").click(function(){
    $("#addbtn").append("");
        
    $("#addbtn input").click(function(){
        console.log("bbb");
    });
});

aaaボタンをクリックするたびにbbbボタンが生成され、2つのbbbボタンを生成すると、1つ目のbbbボタンをクリックするたびに「bbb」が2回印刷され、2つ目のbbbボタンをクリックするたびに「bbb」が1回印刷されます.以上の2つの方法の効果は同じです.
jsを変更すると、bbbボタンclickイベント関数バインドコードをaaaボタンclickクリックイベント関数の外に置きます.

$(function(){
    $("input").click(function(){
        $("#addbtn").append("");
    });
    
    $("#addbtn").on("click", "input", function(){
        console.log("bbb");
    });
});

aaaボタンをクリックするたびにbbbボタンが生成され、いくつかのbbbボタンを生成しても、いずれかのbbbボタンをクリックするたびに「bbb」が1回しか印刷されません.
次のjsを見てください.

$(function(){
    $("input").click(function(){
        $("#addbtn").append("");
        
        $("#addbtn").unbind("click");// $("#addbtn").off("click");
        $("#addbtn").on("click", "input", function(){
            console.log("bbb");
        });
    });
});

aaaボタンをクリックするたびにbbbボタンが生成され、いくつかのbbbボタンを生成しても、いずれかのbbbボタンをクリックするたびに「bbb」が1回しか印刷されません.$("#addbtn").on("click", "input", function(){});このバインドイベント方式は、実際には$("#addbtn")要素にイベントをバインドし、サブ要素の$("input")の要素を下に検索して、要素を動的に生成するイベントバインドを実現することを説明する.
転載先:https://www.cnblogs.com/xuejianbest/p/10284972.html

jsは要素がdisable状態であるか否かを判断する

jQueryは要素に内容を挿入または追加する