Question

我在一个网站上工作，我有一个js问题。

我恢复了这种情况：

我制作了一个带有一些标签的动态表单。
我可以使用js点击功能切换标签
当我点击＆＃34; +＆＃34;选项卡，它会创建一个新标签（<li>上的新<ul>和主广告上的新<div>
但是当我想要新创建的新标签页时，点击功能无法回答。

我在click函数的第一行放了一个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类的元素，并且可以处理元素上的click事件，而无需在每次添加元素时注册click事件。

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

Answer 3

没有jQuery的简化示例。
但想法相同：将点击处理程序添加到ul并在内部点击标记。

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与新元素

3 个答案: