Привязка событий со статическими предками приводит к тому, что каждое событие щелчка вызывается - PullRequest
Новая
       23

Привязка событий со статическими предками приводит к тому, что каждое событие щелчка вызывается

0 голосов
/ 21 января 2019

Я создал небольшое тестовое приложение, которое должно позволить пользователю создать:

  • создание элементов списка
  • удалить элементы списка
  • создавать списки
  • удалить списки

Я узнал, что динамически добавленные элементы не привязываются к событию (на основании этого: Привязка события к динамически создаваемым элементам? ), поэтому я попытался прикрепить событие к одному статическому предку. К сожалению, это приводит к тому, что каждое отдельное нажатие вызывается при нажатии только одной кнопки. 

<head>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <title>Test Page</title>
</head>
<body>
    <div id="container">
        <div class="listContainer">
            <ol>
                <li>First list <button class="btnDeleteListItem">Delete</button></li>
                <li>First list <button class="btnDeleteListItem">Delete</button></li>
                <li>First list <button class="btnDeleteListItem">Delete</button></li>
            </ol>
            <button class="btnAddListElement">+Add List Item</button>
            <button class="btnDeleteList">Delete List</button>
        </div>
        <button class="btnAddList">+Add List</button>
    </div>
</body>
<script>
var btnDeleteListItem = $(".btnDeleteListItem");
var btnAddListElement = $(".btnAddListElement");
var btnDeleteList = $(".btnDeleteList");
var btnAddList = $(".btnAddList");
var container = $("#container");

container.on("click",btnDeleteListItem, function (e) {
    $(this).parent().remove();
    console.log("list item deleted");
});

container.on("click",btnAddListElement, function (e) {
    var html = '<li> Just added <button class="btnDeleteListItem">Delete</button></li>';
    $("ol").append(html);
    console.log("list item added");
});

container.on("click",btnDeleteList, function (e) {
    $(this).parent().remove();
    console.log("list deleted");
});

btnAddList.on("click", function(e){
    var html = '<div class="listContainer"><ol><li>Other list <button class="btnDeleteListItem">Delete</button></li><li>Other list <button class="btnDeleteListItem">Delete</button></li><li>Other list <button class="btnDeleteListItem">Delete</button></li></ol><button class="btnAddListElement">+Add List Item</button><button class="btnDeleteList">Delete List</button></div>';
    $(html).insertBefore($(this));
    console.log("list added");
});
</script>

</html>`

Есть ли способ отделить события нажатия?

1 Ответ

0 голосов
/ 21 января 2019

Проблема в том, что, хотя вы используете делегированные обработчики событий, вы выбираете только элементы при загрузке DOM.Чтобы исправить это, передайте аргумент селектора в on() в виде строки.Таким образом, селектор будет сопоставляться с пузырем событий click через #container, а не только для конкретных экземпляров элемента.

Также обратите внимание, что вам нужно сделать вызов append() only на ol, что соответствует кнопке .btnAddListElement, по которой вы щелкнули, в противном случае вы добавите новый li в каждый список.Для этого измените $('ol') на $(this).prev('ol'). 

var $container = $("#container");

$container.on("click", ".btnDeleteListItem", function(e) {
  $(this).parent().remove();
  console.log("list item deleted");
});

$container.on("click", '.btnAddListElement', function(e) {
  var html = '<li> Just added <button class="btnDeleteListItem">Delete</button></li>';
  $(this).prev("ol").append(html);
  console.log("list item added");
});

$container.on("click", '.btnDeleteList', function(e) {
  $(this).parent().remove();
  console.log("list deleted");
});

$container.on('click', '.btnAddList', function(e) {
  var html = '<div class="listContainer"><ol><li>Other list <button class="btnDeleteListItem">Delete</button></li><li>Other list <button class="btnDeleteListItem">Delete</button></li><li>Other list <button class="btnDeleteListItem">Delete</button></li></ol><button class="btnAddListElement">+Add List Item</button><button class="btnDeleteList">Delete List</button></div>';
  $(html).insertBefore($(this));
  console.log("list added");
});
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<div id="container">
  <div class="listContainer">
    <ol>
      <li>First list <button class="btnDeleteListItem">Delete</button></li>
      <li>First list <button class="btnDeleteListItem">Delete</button></li>
      <li>First list <button class="btnDeleteListItem">Delete</button></li>
    </ol>
    <button class="btnAddListElement">+Add List Item</button>
    <button class="btnDeleteList">Delete List</button>
  </div>
  <button class="btnAddList">+Add List</button>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...