javascript function onclick with new elements

Question

I work on a website, and I have a js problem.

I resume the situation:

I made a dynamic form with some tabs in.
I can switch tabs with a js click function
When I click on the "+" tab , it creates a new tab ( new <li> on the <ul>, and new <div> on main div )
But when I want to go on the new tab freshly created, the click function don't answer.

I put a console.log on the first line of the click function, and no log output.

the click function works well with static content, but with fresh content don't work.

How can I make it works with dynamic content ?

http://jsfiddle.net/npx2mes2/

Possible duplicate of [Click event doesn't work on dynamically generated elements](http://stackoverflow.com/questions/6658752/click-event-doesnt-work-on-dynamically-generated-elements) — Kristijan Iliev, Oct 07 '15 at 17:20
Please share the code, or better, create a [jsfiddle](https://jsfiddle.net) — arcyqwerty, Oct 07 '15 at 17:21
The linked answer above explains the problem and provides a solution with jQuery. Your jsfiddle is mostly plain javascript but you do have some jQuery. Does the jQuery answer work for you? — Jasen, Oct 07 '15 at 17:44
@oxmolol ok..me and J Santosh fixed it for you. just accept either of the answers to close this post — Ori Refael, Oct 07 '15 at 18:06

score 2 · Accepted Answer · answered Oct 07 '15 at 18:00

2

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

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

the problem was on registering the event, you should attach it to parent first, and then on every child.

answered Oct 07 '15 at 18:00

Ori Refael

2,888
3
37
68

pay attention that i changed the .tabs_menu_n1 to #tabs_menu_n1, no actual reason..just force of habit to use Id when possible. – Ori Refael Oct 07 '15 at 18:01

J Santosh · Answer 2 · 2015-10-07T18:17:45.493

change the line $(".tabs_menu_n1 a").click(function(e) { to $(document).on('click', ".tabs_menu_n1 a", function (e) {

Demo

Explanation.

when the elements are being added to DOM dynamically you must register the for the events every time the element is added. So instead of doing this process every time simply register events like below, therefore you don't want to register the events fro dynamically created elements

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

Now i can add elements with selector class dynamically and can handle click event on the element without registering the click event every time i add the element.

Note: You can use parent selector in place of document

score 0 · Answer 3 · answered Oct 07 '15 at 19:19

A bit simplified sample without jQuery.
But idea same: add click handler to ul and check inside that clicked a tag.

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 function onclick with new elements

3 Answers3