jqueryを使用して間違ったボタンのクリックイベントで呼び出された関数

Question

div1、div2、および2つのボタンに '画像の追加'と 'イメージの破棄'という2つのdiv要素があります。

画像の追加ボタンをクリックすると、2つの画像がすべてのdivに追加されます。 任意のdiv内の画像をクリックすると「画像を破棄」ボタンが表示されるので、このボタンをクリックすると機能が破棄されます。

両方のdivの画像にclickイベントを別々に書きましたが、以下のようにbtnのクリック機能を破棄しました。

if($.trim($("#div1").html())=='') 
    { 
     $("#div1").append("<img id='grpA0' width='60px' height='60px' src="1.png">"); 
     $("#div1").append("<img id='grpA0' width='60px' height='60px' src="2.png">"); 

     $("#grpA0").click(function() 
     { 
     $("#discard_image").show();////shows hidden discard btn 
     }); 
     $("#discard_image").click(function() 
    { 
     alert("in div1 discard"); 
     /// some code         
    }); 
} 

if($.trim($("#div2").html())=='') 
{ 
    $("#div2").append("<img id='grpB0' width='60px' height='60px' src="3.png">"); 
    $("#div2").append("<img id='grpB0' width='60px' height='60px' src="4.png">"); 

    $("#grpB0").click(function() 
    { 
     $("#discard_image").show(); ////shows hidden discard btn 
    }); 
    $("#discard_image").click(function() 
    { 
     alert("in div2 discard"); 
     /// some code         
    }); 
} 

私はdiv1から画像をクリックしたときにbtnを破棄しますが、破棄ボタンをクリックすると両方の警告が表示されます。私はクリックを破棄し、e.preventDefault（）;を使用してイベントとしてeを送信しようとしました。しかし、それは動作しません

Answer 1

htmlのid属性は、あなたのHTMLページで一意でなければなりません。

同じIDで2つのdivを作成しました。 div2のdiv1の中で1番目。

だから、基本的にあなたは2つの要素を結合しています。これは、両方の警告を取得している理由です。

$("#discard_card").click(function() 
    { 
    alert("in div1 discard"); 
    /// some code         
}); 
$("#discard_card").click(function() 
    { 
    alert("in div2 discard"); 
    /// some code         
}); 

この問題を解決するには、両方のdivに一意のIDを与える必要があります。あなたはdiscard_1、discard_card_1とdiscard_2、discard_card_2を試すことができ

if($.trim($("#div1").html())=='') 
    { 
     $("#div1").append("<img id='grpA0' width='60px' height='60px' src="1.png">"); 
     $("#div1").append("<img id='grpA0' width='60px' height='60px' src="2.png">"); 

     $("#grpA0").click(function() 
     { 
     $("#discard_1").show(); 
     }); 
     $("#discard_card_1").click(function() 
    { 
     alert("in div1 discard"); 
     /// some code         
    }); 
} 

if($.trim($("#div2").html())=='') 
{ 
    $("#div2").append("<img id='grpB0' width='60px' height='60px' src="3.png">"); 
    $("#div2").append("<img id='grpB0' width='60px' height='60px' src="4.png">"); 

    $("#grpB0").click(function() 
    { 
     $("#discard_2").show(); 
    }); 
    $("#discard_card_2").click(function() 
    { 
     alert("in div2 discard"); 
     /// some code         
    }); 
} 

も同様にHTMLのid値を更新してください。

Answer 2

両方のアイテムで同じ破棄ボタンを使用しているので、リスナーをバインドしてから新しいものをバインドすることをお勧めします。 （すなわち番組に）必要なときにさらに

$("#discard_card").unbind(); 

、次の操作を行います。

$("#grpB0").click(function() { 
    $("#discard").show(); 

    $("#discard_card") 
    .unbind() 
    .on('click', function() { 
    alert("in div2 discard"); 
    /// some code         
    }); 
}); 

フルコードを修正（内部の引用符」に変更さ "を含む）：

ここ

if ($.trim($("#div1").html()) == '') { 
    $("#div1").append("<img id='grpA0' width='60px' height='60px' src='1.png'>"); 
    $("#div1").append("<img id='grpA0' width='60px' height='60px' src='2.png'>"); 

    $("#grpA0").click(function() { 
    $("#discard_image").show(); ////shows hidden discard btn 
    $("#discard_card").unbind() 
     .on('click', function() { 
     alert("in div1 discard"); 
     /// some code         
     }); 
    }); 

} 

if ($.trim($("#div2").html()) == '') { 
    $("#div2").append("<img id='grpB0' width='60px' height='60px' src='3.png'>"); 
    $("#div2").append("<img id='grpB0' width='60px' height='60px' src='4.png'>"); 

    $("#grpB0").click(function() { 
    $("#discard_image").show(); ////shows hidden discard btn 
    $("#discard_card").unbind() 
     .on('click', function() { 
     alert("in div2 discard"); 
     /// some code         
     }); 
    }); 

} 

が働いていますjsfiddle例：https://jsfiddle.net/maxbilbow/cyazd4mn/2/

Answer 3

あなたはいくつかの問題があります。 idの属性は一意である必要があります。 classを使用して複数のタグを指定します。 属性を使用して、DOM内の特定の要素に固有のイベントをアタッチする必要がある場合は、アイテムごとに個別のハンドラを割り当てる代わりに、単一のイベントハンドラを使用することをお勧めします。 2 `に異なるIDを使用するように

if($.trim($("#div1").html())=='') 
 
    { 
 
     $("#div1").append("<img class='group' id='one' width='60px' height='60px' src='1.png'>"); 
 
     $("#div1").append("<img class='group' id='two' width='60px' height='60px' src='2.png'>"); 
 
} 
 

 
if($.trim($("#div2").html())=='') 
 
{ 
 
    $("#div2").append("<img class='group' id='three' width='60px' height='60px' src='3.png'>"); 
 
    $("#div2").append("<img class='group' id='four' width='60px' height='60px' src='4.png'>"); 
 
} 
 

 
$('.group').click(function(event) { 
 
    var divNum = $(event.target).closest('div').data('num'); 
 
    $(".discard[data-num='" + divNum + "']").show(); 
 
}); 
 

 
$('.discard_card').click(function(event) { 
 
    var divNum = $(event.target).closest('div').data('num'); 
 
    alert('Clicked discard for div' + divNum); 
 
});

#one { background-color: yellow; } 
 
#two { background-color: pink; } 
 
#three { background-color: grey; } 
 
#four { background-color: cyan; } 
 

 
.discard { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    
 
<div id="div1" data-num="1"></div> 
 
<div class="discard" data-num="1"> 
 
    <button class="discard_card">Discard</button> 
 
</div> 
 
    
 
<div id="div2" data-num="2"></div> 
 
<div class="discard" data-num="2"> 
 
    <button class="discard_card">Discard</button> 
 
</div>