Question

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

当我点击添加图片按钮时，它会向所有div添加2个图像。当任何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显示但是在discard按钮上单击两个警报都会显示。我试图在弃牌点击中发送e作为事件并使用e.preventDefault（）;但它不起作用

Answer 1

html的id属性在你的html页面中应该是唯一的。

您创建了2个具有相同ID的div。 div2中的第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                                   
  });
});

完整更正的代码（包括＆＃34;更改为＆＃39;内部引号）：

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]属性通常是一个好主意，它允许您只使用一个事件处理程序，而不是为每个项目附加单独的处理程序。 / p>

我猜测你的html结构，但这段代码是我使用data属性的意思的一个例子：

＆＃13;

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);
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

3 个答案: