如何为新创建的DOM元素绑定jQuery函数？

你遇到的问题根源是：直接绑定事件的方式只会对页面加载时已存在的元素生效，后续通过AJAX动态创建的元素不会自动继承这些事件绑定。解决这个问题的核心方案是使用事件委托，借助事件冒泡机制来处理动态元素的事件。

修改后的代码示例 #

把原来直接绑定click事件的写法，改成通过静态父元素（比如document，或更接近目标元素的静态容器）来委托事件：

$(function(){ // 等价于 $(document).ready()，写法更简洁
  // 事件委托：绑定到静态父元素，监听子元素的click事件
  $(document).on('click', '.additem', 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);
      },
    });
  });
});

关键说明 #

1. 事件委托的工作逻辑：
   事件委托是把事件绑定到一个始终存在的父元素上，当子元素（包括后续动态创建的.additem按钮）触发click事件时，事件会冒泡到父元素，父元素再根据目标元素的选择器（.additem）判断是否执行处理函数。这样不管元素是何时创建的，只要符合选择器就能触发事件。

2. 解决重复绑定的问题：
   你之前遇到的重复执行问题，是因为每次AJAX成功后又重新绑定了事件，导致同一个元素被绑定了多个处理函数。而事件委托只需要在页面加载时绑定一次，后续动态创建的元素自动生效，不会出现重复执行的情况。

3. 性能优化建议：
   尽量不要把事件委托绑定到document上，最好选择离动态元素最近的静态父容器（比如所有.additem按钮的共同父元素），这样可以减少事件冒泡的层级，提升页面性能。

内容的提问来源于stack exchange，提问作者kozendgray