javascript 带有新元素的 onclick 函数

Question

我在网站上工作，遇到 js 问题。

我恢复情况：

我制作了一个带有一些标签的动态表单。
我可以用js点击功能切换标签页
当我单击“+”选项卡时，它会创建一个新选项卡（在 <ul> 上新建 <li>，在主 div 上新建 <div> ）
但是当我想进入新创建的新标签时，点击功能没有响应。

我在点击函数的第一行放了一个console.log，没有日志输出

点击功能适用于静态内容，但不适用于新鲜内容。

如何让它与动态内容一起使用？

http://jsfiddle.net/npx2mes2/

Answer 1

http://jsfiddle.net/npx2mes2/1/

$("#tabs_menu_n1").on('click', 'a', function(e)

问题出在注册事件上，您应该先将其附加到父项，然后再附加到每个子项。

Answer 2

将行 $(".tabs_menu_n1 a").click(function(e) { 更改为 $(document).on('click', ".tabs_menu_n1 a", function (e) {

Demo

解释。

当元素被动态添加到 DOM 时，您必须在每次添加元素时注册事件。因此，与其每次都执行此过程，不如像下面这样简单地注册事件，因此您不想注册动态创建的元素的事件

$(document).on('click', ".selector", function (e) {));

现在我可以使用 selector class 动态添加元素，并且可以处理元素上的点击事件，而无需在每次添加元素时都注册点击事件。

注意：您可以使用父选择器代替文档

Answer 3

没有 jQuery 的稍微简化的示例。
但想法相同：将点击处理程序添加到 ul 并检查点击的 a 标签。

var x = 2;
var original = document.getElementById('H1_n1');

function a(content, href) {
  var link = document.createElement("a");
  link.textContent = content;
  link.setAttribute('href', href);
  return link;
}

function li_a(id, content, href) {
  var listItem = document.createElement("li");
  listItem.setAttribute('id', id);
  listItem.appendChild(a(content, href));
  return listItem;
}

function div(id, textContent) {
  var d = document.createElement("div");
  d.setAttribute('class', 'tab_content_n1')
  d.setAttribute('id', id)
  d.textContent = textContent;
  return d;
}

function add_rec() {
  var i = x++;
  var mdiv = document.getElementById("tab_n1");
  mdiv.appendChild(div('H1_n' + i, '\nHello world from n' + i + '.\n'));

  pbtn = document.getElementById('pbtn');
  var ul = document.getElementById("tabs_menu_n1");
  ul.insertBefore(li_a("hn" + i, "H" + i, "#H1_n" + i), pbtn);
}


document.getElementById('tabs_menu_n1').addEventListener('click', function(e) {
  var el = e.target;

  if (el.nodeName !== 'A') return;

  if (el.hash == "#+") add_rec();
  else {
    e.preventDefault();
    var current = document.querySelectorAll("#tabs_menu_n1 .current, #tab_n1 .current");
    for (var i = 0, len = current.length; i < len; i++) {
      current[i].classList.remove('current');
    }

    el.classList.add('current');
    document.querySelector(el.hash).classList.add('current');
  }
}, false);

.tab_content_n1 {
  display: none;
}
.tab_content_n1.current {
  display: block;
  animation: fadeIn 1s;
}
a.current {
  color: red;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<div class="tab_space">
  <ul id="tabs_menu_n1" class="nav nav-tabs tabs_menu_n1 tab_body">
    <li><a class="current" href="#M_n1">mai</a>
    </li>
    <li><a href="#R_n1">red</a>
    </li>
    <li id="hn1"><a href="#H1_n1">hor</a>
    </li>
    <li id="pbtn"><a href="#+">+</a>
    </li>
  </ul>
</div>
<div id="tab_n1" class="tab_n1">
  <div class="tab_content_n1 current" id="M_n1">mai</div>
  <div class="tab_content_n1" id="R_n1">red</div>
  <div class="tab_content_n1" id="H1_n1">hor</div>
</div>

javascript 带有新元素的 onclick 函数

javascript function onclick with new elements

html

javascript

dynamic