使用jQuery在错误按钮中调用的函数单击事件

Question

我有2个div元素说div1，div2and 2按钮'添加图像'和'丢弃映像'（最初隐藏）。

当我单击添加图像按钮时，它将2个图像添加到所有Div。当任何div中的图像单击"丢弃图像"按钮时，当我单击此功能时，当我单击此功能时。

我已经在div中分别单击图像上的单击事件，以及下面丢弃btn 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作为descard click中的事件发送，并使用了e.preventdefault（）;但是它不起作用

Answer 1

html的id属性在您的html页面中是唯一的。

您创建了具有相同ID的2div。Div1中的第1位。

基本上，您将两个Elentet绑定到您的丢弃元素。这就是为什么您都得到警报的原因。

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

要解决此问题，您需要为两个Div提供唯一的ID。您可以尝试distord_1，dist_card_1和dodsard_2，dost_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>