如何將 jQuery Function 應用於新創建的 DOM 元素？

Question

我正在創建一個菜單和所有異步的子菜單項。

似乎每次我使用 AJAX 創建按鈕元素時，在$(document).ready上創建的 Javascript 都不起作用，這是有道理的，因為它是在文檔准備好之后創建的。 但是我用什么來捕捉新創建的元素呢？

這是有問題的 function，對於所有帶有.additem的按鈕，當頁面加載時，它工作得很好，但是當使用.additem創建新按鈕時，它根本不起作用。

所以我相信 javascript 不會在新元素上被調用。 我做過幾次測試，我相信情況確實如此，但當然我也可能是錯的。

$('document').ready(function(){


$('.additem').click( function(e) {
  
    e.preventDefault();
    console.log('test')
    const category_id = $(this).attr('id');
    const url = `/add_item/${category_id}/`;
    const name = $(`.newitemname${category_id}`).val();
    const price = $(`.newitemprice${category_id}`).val();
    const description = $(`.newitemdescription${category_id}`).val();

    $.ajax({
      type: 'POST',
      url: url,
      data: {
        'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val(),
        'name':name,
        'price':price,
        'description':description,
      },
      success:function(response) {
        console.log('success', response);
        $(`.itemlist${response['category_id']}`).append($(`
          <li class="row"> 
            <div class="fw-normal mb-0 col-8"> ${response['item_name']} </div> 
            <div class="col-3 text-muted pl-5" align="right">$ ${response['item_price']}</div>
            <p class="fw-lighter lh-sm" style="font-size: 12px;"> ${response['item_description']} </p> 
          </li>
        `));
      },
      error:function(response){
        console.log('error', response)
      },
    });

})

我試過$().click但由於某種原因它不適用於新創建的按鈕。

不過，它適用於頁面上已有的元素。

我也嘗試過$().change()但它會創建同一腳本的多個副本。 因此，當我單擊該按鈕時，每次單擊該按鈕時它都會執行 +1 次。 每次我點擊.additem時，最終都會創建 5 個相同的項目。

Answer 1

在 jQuery 中，如果您希望事件處理程序觸發事件處理程序綁定后添加的元素'.additem' ，您需要使用“委托”事件處理程序，請參閱https://api.jquery.com/on/#direct -和委托事件

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

在這里你需要記住將該處理程序附加到所有目標元素的父元素（我在這個例子中使用了document ）。