Question

lHi，

我在html文档中有一些div，当我单击div时，我要添加一个按钮。例如附上：

HTML：

<div class="week">
     <div class="day wk1" id="day1">   
          <label for="day1">Test</label>       
      </div>
      <div class="day wk1" id="day2">  
          <label for="day2">Test</label>       
      </div>

当我通过单击div添加按钮时，没问题。

添加按钮：

$(".day").click(function (e) { 
        e.preventDefault();
        var check = $("#day7").width() - 2;
        var insert = $(this).prop("id");
        insert = `#${insert}`;
        var par = $('<br class="break"><button class="testing">').html('Shift Manual Insert').width(check).css("background-color", "green");
        par.appendTo(insert);
        // console.log(insert);
    });

当我通过单击删除按钮时，它确实将其删除，但同时根据上面和下面的代码添加了一个新按钮。

删除按钮：

$(".day").on('click','.testing', function(e){
    e.preventDefault();
    $(".break").remove;
    $(this).remove();
  });

我确定自己在做一些愚蠢的事情，但是为了我的一生，我无法弄清楚吗？请忽略我对ID和类的不正确使用，这纯粹是一种获得经验的测试。

我们将不胜感激。

亲切的问候

韦恩

Answer 1

该事件正从具有click类的dom上的.testing处理程序传播到具有.day类的dom的父级。 .day还有另一个单击处理程序，可以添加该元素。因此，在再次删除该元素之后，$(".day").click(function(e) {被触发，这又添加了button元素

在e.preventDefault();的{{1}}处理程序中将e.stopPropagation();替换为click

.testing

$(".day").click(function(e) {
  console.log('x')
  e.preventDefault();
  var check = $("#day7").width() - 2;
  var insert = $(this).prop("id");
  insert = `#${insert}`;
  var par = $('<br class="break"><button class="testing">').html('Shift Manual Insert').width(check).css("background-color", "green");
  par.appendTo(insert);
  // console.log(insert);
});


$(".day").on('click', '.testing', function(e) {
  e.stopPropagation();
  $(".break").remove;
  $(this).remove();

});

Answer 2

您的按钮位于div内部。因此，当您单击按钮时，也会触发div点击事件。这是由于事件冒泡。选中https://www.w3schools.com/jquery/event_stoppropagation.asp

$(".day").on('click','.testing', function(e){
    e.stopPropagation();
    e.preventDefault();
    $(".break").remove;
    $(this).remove();
  });

动态创建按钮，然后在jQuery中单击时删除该按钮

2 个答案: