0

プロジェクトで jQuery を使用していますが、.prepend() で問題が発生しました。http://qlimp.comにアクセスし、次のユーザー名/パスワードを使用してログインしてください。dummy /dummy 次に、[ Go to Information settings ] リンクをクリックします。[サービスの追加] ボタンをクリックします -> Facebook アイコンをクリックします-> [追加] ボタンをクリックします

青いFacebook タグが表示されます。このプロセスをもう一度実行すると、2 つの ではなく 3 つの facebook タグ (一度に 2 つのタグを追加) が表示されます。いいえの前に2回追加するようなものです。以前のタグの。なぜそうなのですか？

jQueryコードは次のとおりです。

$("#facebook").click(function(){
    $("#facebook-info").fadeIn("slow");
    $("#facebook-button").click(function(){
        a = a+1;
        $("#service-sets").prepend('<div class="tag" id="'+a+'"><span class="blue-tag">Facebook<span class="delete-tag"><i class="icon-cancel-circle-1" id="facebook-del"></i></span></span></div>');
    });
});

$("#service-sets").on('click', '#facebook-del', function() {
    $("#facebook-tag").remove();
});

HTML

<div id="service-sets">
</div>

サンプルコードを使用してjsfiddle http://jsfiddle.net/YVZH5/をチェックインしたところ、動作しています (一度に 1 つのタグを追加しています)。誰か私が犯した過ちを教えてもらえますか?

ありがとう！

4

1 に答える 1

1

click1 つのイベントのみを使用します。親要素と子要素に対してそれを行っています。

$("#facebook-button").click(function(){
    $("#facebook-info").fadeIn("slow");   
        a = a+1;
        $("#service-sets").prepend('<div class="tag" id="'+a+'"><span class="blue-tag">Facebook<span class="delete-tag"><i class="icon-cancel-circle-1" id="facebook-del"></i></span></span></div>');      
});

クリック イベントが親と子の div にバインドされている場合、子の div をクリックすると、親イベント イベントが停止します。stopPropagationバブリングイベントの実行を停止するために使用できます。

于 2012-06-02T14:43:53.093 に答える