如何将点击功能添加到动态创建的元素？ [复制]答案

【问题标题】：How to add an on click function to a dynamically created element? [duplicate]如何将点击功能添加到动态创建的元素？ [复制]
【发布时间】：2019-08-23 10:05:33
【问题描述】：

我知道有人提出并回答了类似的问题，但我似乎无法让它们适用于我的问题。

以下是提交表单时发送ajax post的代码

  $form.on("submit", function(event) {
    event.preventDefault();

    $.ajax({
      url: url,
      data: JSON.stringify({ description: desc }),
      type: "POST",
      contentType: "application/json",
      dataType: "json",
      success: function(data) {

        $(".list").append(
          '<li><input type="checkbox" value="' +
            data.id +
            '">description</li>"
        );
        createOnClicks(data.id);
      },
      error: function(error) {
        //list errors      },
      complete: function() {
       //reset form
      }
    });
  });

这是createOnClicks() 函数的一部分：

function createOnClicks(id) {
    var listId = "#" + id;

    $(listId).on("click", function(event) {
      var value = $(this).is(":checked");

      if (value) {
        console.log("checked");
        $.ajax({
          url: "/listapi/" + id + "/complete",
          type: "POST",
          contentType: "application/json",
          dataType: "json",
          success: function(data) {
            console.log(data);
            $(listId)
              .parent("li")
              .addClass("complete");
          }
        });
      } else { ... 
    }
});

createOnClicks 在页面加载时对存在的元素调用时可以正常工作，但对使用 ajax 帖子添加的元素不起作用。

$(listId) 在createOnClicks() 中调用时返回一个空对象，尽管上面的行中`console.log(listID) 显示了适当的值。

【问题讨论】：

标签： javascript jquery ajax asynchronous post

【解决方案1】：

这应该将点击处理程序应用于所有具有匹配选择器的元素，即使在页面加载之后添加也是如此。

$(document).on('click', '#list_id', (event)=>{/* some code */})

每个 cmets，这应该有助于满足您的需求：

<html>
<body>
    <button id="add">add</button>
    <div id="container">
    </div>
    <script type="text/javascript">
    var postHandler = (event)=>{
        console.log('my id is', event.currentTarget.getAttribute('data-postid'));
    }
    var number_of_elements = 0;
    document.getElementById('add').addEventListener('click', (event)=>{
        let new_element = document.createElement('div');
        new_element.innerText = "hello";
        new_element.className = "cool_element";
        new_element.setAttribute('data-postid', number_of_elements++);
        new_element.addEventListener('click', postHandler);
        document.getElementById('container').appendChild(new_element);
    })
    </script>
</body>
</html>

【讨论】：

他们都有不同的 id、list_1、list_2 等等。
然后对它们都使用相同的类
@Samantha 如果您有许多需要为同一事物识别的元素，请使用类而不是 ID。 class="cool_list" 在元素中，.cool_list 在选择器中。
如果你看createOnClicks函数，我需要为每个元素添加一个id特定的post请求。
@Samantha 尝试使用属性来存储这样的数据。也许data-postid="1" 创建元素时。然后在处理程序中访问event.currentTarget.getAttribute('data-postid'); 不理想，为此使用元素 ID 的子字符串。