add event to a button inside li using javascript or jquery

Question

I have a list of products, each <li> has a delete button and product's name so for deleting the product i should affect a function to the created buttons i tried many methods but it did'nt work by using javascript file but when i wrote the same code on the console of my navigator it works so please tell me what's wrong here is me jvascript code and html thank you

var products = [];

//adding a prodicts
var button = document.querySelector("#add");
var name;

button.addEventListener("click", function() {
  name = prompt("donner le type du produit");
  products.push(name);
  var ul = document.getElementById("products");
  $("ul").append("<li><button class='delete'><i class='fa fa-trash'></i></button>" + name + "</li>");

});
//deleting a product using java script

/*var deleteButton = document.getElementsByClassName(".delete");
for (var i = 0 ; i < deleteButton.length; i++) {
    deleteButton[i].addEventListener("click",function(){alert("you can delete this product now");}) ; 
 }
 
$(".delete").click(function(){alert("succ");});*/
$(function() {
  $(".delete").click(function() {

    alert("you can delete it now");
  });
});

.form-inline {
  text-align: right;
}

.navbar {
  padding-top: 10px;
}

#list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
}

.delete {
  background-color: #0000FF;
  margin-right: 20px;
  color: white;
  text-align: center;
  display: inline-block;
  height: 30px;
  width: 0;
  transition: 0.2s;
  opacity: 0;
}

li:hover button {
  width: 30px;
  opacity: 1.0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <form class="form-inline my-2 my-lg-0">
      <button class="btn btn-primary my-2 my-sm-0" type="button">Résumé</button>
      <button id="add" class="btn btn-primary my-2 my-sm-0" type="button">Ajouter</button>
      <button class="btn btn-primary my-2 my-sm-0" type="button">Aide</button>
      <button class="btn btn-primary my-2 my-sm-0" type="button">A propos</button>
    </form>
  </div>
</nav>
<ul id="products">

</ul>

This answer should help you: [**Event binding on dynamic elements**](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements#answer-1207393) — NewToJS, Dec 24 '17 at 13:17

score 0 · Answer 1 · answered Dec 24 '17 at 13:22

Try this with method .on

var products = [];

//adding a prodicts
var button = document.querySelector("#add");
var name;

button.addEventListener("click", function() {
  name = prompt("donner le type du produit");
  products.push(name);
  var ul = document.getElementById("products");
  $("ul").append("<li><button class='delete'><i class='fa fa-trash'></i></button>" + name + "</li>");

});
//deleting a product using java script

/*var deleteButton = document.getElementsByClassName(".delete");
for (var i = 0 ; i < deleteButton.length; i++) {
    deleteButton[i].addEventListener("click",function(){alert("you can delete this product now");}) ; 
 }
 
$(".delete").click(function(){alert("succ");});*/
$(function() {
  $("body").on('click', '.delete', function() {

    alert("you can delete it now");
  });
});

.form-inline {
  text-align: right;
}

.navbar {
  padding-top: 10px;
}

#list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
}

.delete {
  background-color: #0000FF;
  margin-right: 20px;
  color: white;
  text-align: center;
  display: inline-block;
  height: 30px;
  width: 0;
  transition: 0.2s;
  opacity: 0;
}

li:hover button {
  width: 30px;
  opacity: 1.0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <form class="form-inline my-2 my-lg-0">
      <button class="btn btn-primary my-2 my-sm-0" type="button">Résumé</button>
      <button id="add" class="btn btn-primary my-2 my-sm-0" type="button">Ajouter</button>
      <button class="btn btn-primary my-2 my-sm-0" type="button">Aide</button>
      <button class="btn btn-primary my-2 my-sm-0" type="button">A propos</button>
    </form>
  </div>
</nav>
<ul id="products">

</ul>

score -1 · Answer 2 · answered Dec 24 '17 at 13:24

You should write event Listener function inside either jquery ready function or javascript onload function to make it work properly.

So your delete function should be like this

$(document).ready(function(){
    $(".delete").click(function() {
        alert("you can delete it now");
    });
});

score -1 · Answer 3 · answered Dec 24 '17 at 13:26

-1

If you want to add event listeners for dynamic elements using jQuery, using .on

In your case, change .click to .on :

$(function() {
  $(".delete").click(function() {

    alert("you can delete it now");
  });
});

To:

$(function() {
  $(".delete").on('click', function() {

    alert("you can delete it now");
  });
});

.on vs .click: Difference between .on('click') vs .click()

answered Dec 24 '17 at 13:26

Cuong Vu

3,423
14
16

I suggest you to read the official documentation http://api.jquery.com/on/ - specially the part on dynamic event delegation. The way you portrayed it is useless. – Roko C. Buljan Dec 24 '17 at 13:30

score -1 · Accepted Answer · answered Dec 24 '17 at 13:31

-1

Just change the way you attach event listener to the buttons. Because you are attaching event listener the buttons that are not preset in the DOM tree at that time, therefore there is not any event listener on those buttons.

Below is the code to attach an event listener to the elements which are not necessarily available in the DOM tree

$(function() {
  $(document).on("click",".delete",function() {

    alert("you can delete it now");
  });
});

This little change will solve your problem for event listeners

answered Dec 24 '17 at 13:31

Shridhar Sharma

2,337
1
9
13

Instead of bloating document with listeners, you could assign a listener to the button at creation point. - And BTW this was already answered (suggested) – Roko C. Buljan Dec 24 '17 at 13:33
but if you have many logics to put the elements on the page then you have to attach event listeners everytime, so it is better to run a code once for all the elements in preset and future. – Shridhar Sharma Dec 24 '17 at 13:42
You're right. Say in the case that UL is already filled with LI. - but in the case that the list is dynamically generated from an array resource you can again assign events to the buttons -directly, without going down do `document`. – Roko C. Buljan Dec 24 '17 at 13:46
I just gave an exampe using document, you can do it with any static parent node actually. – Shridhar Sharma Dec 24 '17 at 13:50
I'd rather use a static parent ID in such case. I'm not the downoter. And Sandro gave the same suggestion 9min before you did. So probably that's the cause... – Roko C. Buljan Dec 24 '17 at 14:09

add event to a button inside li using javascript or jquery

4 Answers4