почему после вставки html через jquery динамически, клик не срабатывает на вставленном блоке?

Question

<li class="item-cart product-item-{{$product->id}}">
  <a href="#" data-id="{{$product->id}}" class="remove">&times;</a>
</li>

когда этот блок загрузится через php то клик на remove срабатывает, а если добавится этот же блок через jquery появляется, но клик не реагирует

Answer 1

const container = document.querySelector('.container');
let i = 0;

addButton.onclick = () => {
    const button = document.createElement('button');
    button.innerText = `Кнопка ${++i}`;
    container.appendChild(button);
}

container.onclick = (e) => {
    const isButton = e.target.closest('button');
    if (!isButton) return;
    
    console.log(isButton);
}

<button id="addButton">Добавить кнопку</button>
<div class="container">
    <p>123</p>
</div>

Answer 2

Если эл-ты добавляются динамически, после срабатывания js, которая вешает ивент, то есть несколько вариантов, как всё исправить.

Самый простой вариант - берём ведь док-т (лучше брать блок, в который добавляются эл-ты) и вешаем событие на нужный эл-т

$(document).on('click', '.remove', function () { ... });

Так же, можно код что вешает событие обернуть в функцию и вызывать её после каждого добавленя эл-та (не лучший вар-т)

function setClick (){
    $('.remove').click(function(){ ... });
}

Или же написать функцию клика и прописывать её в артибут эл-та

<button onclick="setClick(this)">Click</button>

function setClick (elem) {
...
}

Answer 3

let i = 0;

$('#addButton').on('click', () => {
    const button = document.createElement('button');
    button.innerText = `Кнопка ${++i}`;
    $('.container').append(button);
});

$('.container').on('click', 'button', function() {
    console.log(this);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="addButton">Добавить кнопку</button>
<div class="container">
    <p>123</p>
</div>

БЛОГ НА HUSL

почему после вставки html через jquery динамически, клик не срабатывает на вставленном блоке?

Ответы (3 шт):