函數調用錯誤的按鈕單擊事件使用jquery

Question

我有2個div元素說div1，div2和2個按鈕的'添加圖像'和'放棄圖像'（最初隱藏）。

當我點擊添加圖像按鈕，它將2個圖像添加到所有div。 當任何div內的圖像被點擊'丟棄圖像'按鈕變得可見，所以當我點擊這個丟棄一些功能。

我在兩個div上分別寫了圖片上的點擊事件，並丟棄了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作爲放棄點擊事件並使用e.preventDefault（）;但它不起作用

Answer 1

html的id屬性在你的html頁面中應該是唯一的。

您創建了2個具有相同ID的div。 div1中的第一個div2中的第一個。

所以基本上你綁定兩個elentet你的丟棄元素。這就是爲什麼你同時獲得警覺。

$("#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中某些元素的事件時，使用data-[something]屬性通常是一個好主意，它允許您只使用一個事件處理程序，而不是爲每個項目附加單獨的處理程序。

我猜你的HTML結構，但這個片段是我的意思的例子，通過使用屬性data：

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>