How to add a jquery on click on a button that was created dynamically?

Question

I have buttons that was created dynamically. How to add a jquery onclick on this button? I am still new to jQuery.

This is how I created my buttons in jQuery:

  var language_add_button = document.createElement("button");
  language_add_button.setAttribute("id", "btnRemoveLanguage_" + ctr);
  language_add_button.setAttribute("class", "btn btn-padding");
  language_add_button.setAttribute("type", "button");

This function creates buttons with id + ctr making them unique.

I know about

  $("#btnRemoveLanguage_").click(function (e) {
    RemoveLanguage(true);
    e.preventDefault();
  });

But since there is a counter when created, the buttons becomes btnRemoveLanguage_1, btnRemoveLanguage_2, etc.

How do I make sure that it is clicking the right button?

To add events to a dynamic button you need to know the parent (parent should be static). Thn you can add an event — AHMED SAJJAD, Feb 22 '21 at 08:36

score 0 · Answer 1 · answered Feb 22 '21 at 08:36

0

for dynamic event handling you can use: event-listener on parent element. Document on event delegation

but as for now i have used document.

$(document).on("click", "#btnRemoveLanguage_",function (e) {
    RemoveLanguage(true);
    e.preventDefault();
  });

answered Feb 22 '21 at 08:36

kunal panchal

798
5
21

There is a counter on btnRemoveLanguage_ making it btnRemoveLanguage_1, btnRemoveLanguage_2 – rod james Feb 22 '21 at 08:38
1

this is just an example for the event delegation for your question. you can use your logic to loop with the classNames or ID and attach the eventlisteners. – kunal panchal Feb 22 '21 at 08:40

The KNVB · Answer 2 · 2021-02-22T08:41:02.403

0

This is my solution.

var language_add_button = document.createElement("button");
language_add_button.setAttribute("id", "btnRemoveLanguage_" + ctr);
language_add_button.setAttribute("class", "btn btn-padding");
language_add_button.setAttribute("type", "button");

/*******************************
 *   Append the following code *
 *******************************/      
$(language_add_button).click((e)=>{
    RemoveLanguage(true);
    e.preventDefault();
})

edited Feb 22 '21 at 08:41

answered Feb 22 '21 at 08:37

The KNVB

3,588
3
29
54

I modify my code to make it easier to understand. – The KNVB Feb 22 '21 at 08:42

score 0 · Answer 3 · answered Feb 22 '21 at 08:39

0

You would do:

$(document).on("click", "#your_id" , function() {
            // do something $(this) is your button
        });

answered Feb 22 '21 at 08:39

Robertino Vasilescu

1,038
1
7
13

The `#your_id` on this example is static. Unless you are saying to create a lot of this per ID._ctr – rod james Feb 22 '21 at 08:41
Use template literals for substituting the "static" #your_id, e.g. \`#{your_var}\`... – Robertino Vasilescu Feb 23 '21 at 08:32

score 0 · Answer 4 · answered Feb 22 '21 at 08:43

.click() will only bind to existing elements in the document aka Direct binding. In your case (the element gets created dynamically), you will have to use Delegated binding like .on().

var buttonID = "btnRemoveLanguage_" + ctr;
var language_add_button = document.createElement("button");
language_add_button.setAttribute("id", buttonID);
language_add_button.setAttribute("class", "btn btn-padding");
language_add_button.setAttribute("type", "button");

$(document).on("click", buttonID, function(e) {
    RemoveLanguage(true);
    e.preventDefault();
});

$(document).delegate(buttonID, "click", function(e) {
    RemoveLanguage(true);
    e.preventDefault();
});

source

score 0 · Answer 5 · answered Feb 22 '21 at 08:46

0

You can use bind.

language_add_button.appendTo('/where you need to add/').bind('click', '/your callback function here/');

answered Feb 22 '21 at 08:46

tiborK

385
1
6

rod james · Answer 6 · 2021-02-22T09:28:19.580

I added a value on my button and changed it to class instead. This solved my problem

  var language_add_button = document.createElement("button");
  language_add_button.setAttribute("class", "btn btn-padding btnRemoveLanguage");
  language_add_button.setAttribute("type", "button");
  language_add_button.setAttribute("value", ctr);


  $("#btnRemoveLanguage_").click(function (e) {
    var ctr = $(this).val();
    RemoveLanguage(true, ctr);
    e.preventDefault();
  });

With this, I only have 1 remove function and will work on ALL buttons with ctr as its value.

score 0 · Answer 7 · answered Feb 22 '21 at 09:03

Isn`t it easier to connect the listener to class, not to ID? Or create a data value and connect to it. That will add a listener to any new element automatically.

const language_add_button = document.createElement("button");
language_add_button.setAttribute("id", "btnRemoveLanguage_" + ctr);
language_add_button.setAttribute("class", "btn btn-padding arrayOfMyButtons");
language_add_button.setAttribute("type", "button");

$(".arrayOfMyButtons").click(function (e) {
   // any logic inside
});

This is now the same in my answer. but instead of arrayOfMyButtons, I added a value in my buttons instead. — rod james, Feb 22 '21 at 09:10

How to add a jquery on click on a button that was created dynamically?

7 Answers7