JS点击按钮动态创建元素多次操作后逻辑异常问题求助

问题根因 #

• 初始绑定的点击事件未解绑：页面加载时给初始的「Yeni İstasyon Ekleyin」元素绑定了点击事件，后续你将该元素修改为站点卡片、修改了ID，但是绑定的点击事件依然残留，点击已生成的站点卡片也会触发新增逻辑
• 新增的「Yeni İstasyon Ekleyin」按钮无点击事件：原代码用的jQuery直接绑定仅对页面加载时已存在的元素生效，后续动态插入的新增按钮不会触发点击逻辑
• ID重复问题：DOM规范要求ID全局唯一，原代码中每次新增的按钮都复用了istasyonismispan这个ID，同时旧元素修改ID前的事件残留，导致选择器经常匹配到错误元素

修复方案 #

1. 将直接点击绑定改为事件委托，绑定到父级容器#kanbanrow上，仅对ID为istasyonismispan的元素生效，自动适配后续动态新增的按钮
2. 点击事件中直接操作当前触发事件的元素，避免全局ID选择器匹配到错误元素
3. 旧元素修改ID后移除原有点击事件，避免误触发

修复后完整代码 #

JS代码 #

// 改为事件委托，绑定到父级，适配动态新增元素
$("#kanbanrow").on("click", "#istasyonismispan", function() {
  // 直接操作当前触发事件的元素，不需要查ID
  const curElement = this;
  curElement.innerHTML = "";
  const id = curElement.id;
  const divareastn = curElement;
  divareastn.style.height = "100px";
  divareastn.style.paddingTop = "10px";
  divareastn.style.backgroundColor = "#D8C7B4";
  const input = '<input   type="text" id="inputid' + id + '"    style="width:260px;height: 35px;padding-left: 1rem" class="form-control form-control-sm"  placeholder="İstasyon İsmi Giriniz...">';
  const newbutton = '<button  type="text" id="buttonid' + id + '"   style="width:260px;height: 35px;margin-top: -2rem"  class="addstation btn btn-sm btn-primary bi bi-plus-square" onclick="eklebutton(this.id)">   EKLE...</button>';
  divareastn.innerHTML = input + "<br>" + newbutton;
  document.getElementById("inputid" + id).focus();
});


function eklebutton(id) {
  const mainid = id.substr(8);
  const inputid = "inputid" + mainid;
  const stationid = document.getElementById(inputid).value;
  const stationidcheck = stationid.replace(/\s/g, '');
  const istasyonismispan = "istasyonismispan" + stationidcheck;

  if (stationidcheck != "") {
    // 直接拿当前正在操作的元素，避免ID匹配错误
    const curStationElement = document.getElementById(mainid);
    curStationElement.innerHTML = "";
    const headerofstation = '<h4><span class="float-md-start text-dark" > ' + stationid + '</span></h4>';
    const newinnerhtml = headerofstation + '<p id="" style="width:260px;height: 35px;margin-top: 1rem" class="float-md-start bi bi-plus-square" > YENİ GÖREV EKLE...</p>'
    curStationElement.innerHTML = newinnerhtml;
    // 修改ID
    curStationElement.id = istasyonismispan;
    // 移除该元素的点击事件，避免后续误触发
    $(curStationElement).off("click");

    const divarea = document.getElementById("kanbanrow");
    const newtag = document.createElement("A");
    newtag.style.width = "310px";
    newtag.innerHTML =
      '<a style="width:300px;height: 40px;line-height: 40px;padding-left: 20px;" id="istasyonismispan"  class="float-md-start hoverback " ><span class="bi bi-plus-square"></span>    Yeni İstasyon Ekleyin</a>';
    divarea.appendChild(newtag);
  } else {
    alert("LÜTFEN İSTASYON BAŞLIĞI GİRİNİZ");
  }
};

CSS代码 #

div.scrollmenu {
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
}

.hoverback {
  background: rgba(113, 199, 230, 1);
}

.hoverback:hover {
  background: rgba(113, 199, 230, 0.7);
}

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<body>
  <div class="scrollmenu ">
    <div class=" float-md-start " id="kanbanrow">
      <a style="width:300px;height: 40px;line-height: 40px;padding-left: 20px;" id="istasyonismispan" class="hoverback text-white  "><span class="bi bi-plus-square"></span>    Yeni İstasyon Ekleyin</a>

    </div>
  </div>
</body>

内容的提问来源于stack exchange，提问作者Haluk Aydoğan