SetAttribute Class of a dynamically created element - Javascript

Question

I'm creating a hyperlink element dynamically and set its attribute class so when it is clicked it will trigger a function.

Here is the code for dynamically creating the hyperlink element:

editLink = document.createElement("a");
editLink.setAttribute("class", "edit-button");

This is what should happen when the link was clicked:

$(document).ready(function(){

    $('.edit-button').click(function(event){
    event.preventDefault(); 
    var docHeight = $(document).height();
    var scrollTop = $(window).scrollTop();
    $('.overlay').show().css({'top': scrollTop + 'px'});
    });
});

But nothing happens when it is clicked. Thank you in advance :)

Use **event delegation** ... instead of `$('.edit-button').click(....` try `$(document.body).on('click','.edit-button',function(){....` — Kartikeya Khosla, Mar 28 '16 at 05:48
you should call document.ready function again after setting class dynamically or do as @KartikeyaKhosla said — Saeed Taran, Mar 28 '16 at 05:50
possible duplicate of http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Kartikeya Khosla, Mar 28 '16 at 05:54
What could be a problem is something as simple as your HTML or CSS. Please provide them so we have a complete picture of your situation. We have no idea what or where `.edit-button` or `.overlay` is. — zer00ne, Mar 28 '16 at 06:25

score 0 · Answer 1 · answered Mar 28 '16 at 05:54

Not sure if you are appending the created element with body. I make this changes and it is working fine

var editLink = document.createElement("a");
editLink.setAttribute("class", "edit-button");
editLink.innerHTML = "Click"; // added text for testing
window.document.body.appendChild(editLink); // Appending to body

$(document).ready(function(){
  $('.edit-button').click(function(event){
    event.preventDefault(); 
   alert('1')
    var docHeight = $(document).height();
    var scrollTop = $(window).scrollTop();
    $('.overlay').show().css({'top': scrollTop + 'px'});
    });
});

jsfiddle

score 0 · Answer 2 · answered Mar 28 '16 at 06:01

try this

var editLink = document.createElement("a");
editLink.setAttribute("class", "edit-button");
editLink.innerHTML  = 'click';
document.body.appendChild(editLink);

$(function() {
    $('.edit-button').on('click',function(event){
    alert('clicked');
    event.preventDefault(); 
    var docHeight = $(document).height();
    var scrollTop = $(window).scrollTop();
    $('.overlay').show().css({'top': scrollTop + 'px'});
    });
});

https://jsfiddle.net/s718ay3g/1/

score 0 · Answer 3 · answered Mar 28 '16 at 06:16

Event Delegation is the way to do it.

When you add event to .edit-button directly, at the time of loading the document, browser attaches that event listener to only the currently existing .edit-button elements. It doesn't get executed automatically for the newly created elements with the same class.

What you could do is put your event biding and listener code in a function and call it each time you add a new element to the DOM. But that's considered a bad practice.

Welcome, Event Delegation.

The idea is to attach the event to a parent/ancestor element which is not dynamic and trigger the event only when the event target is your specified element( matched with some sort of selector like class or ID).

In your case, the updated event binding code would look like this.

$(document.body).on("click", ".edit-button", function(){
    //whatever you want to do in here.
});

and then, you can continue to add classes to newly created elements like you did...

var editLink = document.createElement("a");
editLink.setAttribute("class", "edit-button");

The event would still work.

This way you only attach the event once.

If your buttons/links are going to be contained in a container div or something similar, attach the event to that container instead of body.

$(".class-of-the-container").on("click", ".edit-button", function(){
    //whatever you want to do in here.
});

SetAttribute Class of a dynamically created element - Javascript

3 Answers3