使用javascript或jquery将事件添加到li内的按钮

Question

我有一个产品列表，每个self.onmessage = function (event) { console.log('recieved'); self.postMessage({value : event.data.value * 2}); } self.onerror = function (event) { console.log(error); self.postMessage(event); } 都有一个删除按钮和产品名称 所以为了删除产品我应该影响创建按钮的功能我尝试了很多方法，但它没有使用javascript文件工作 但是当我在导航仪的控制台上编写相同的代码时，它可以工作 所以请告诉我出了什么问题 这是我的jvascript代码和html 谢谢

<li>

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;
}

Answer 1

使用方法.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>

Answer 2

您应该在jquery ready函数或javascript onload函数中编写事件监听器函数，以使其正常工作。

所以你的删除功能应该是这样的

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

Answer 3

如果要使用jQuery为动态元素添加事件侦听器，请使用.on

在您的情况下，将.click更改为.on：

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

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

要：

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

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

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

Answer 4

只需更改将事件侦听器附加到按钮的方式即可。因为您正在附加事件侦听器当时未在DOM树中预设的按钮，因此这些按钮上没有任何事件侦听器。

下面是将事件侦听器附加到DOM树中不一定可用的元素的代码

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

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

这一小改动将解决您的事件监听器问题