javascript - 使用 jQuery/JS 创建的按钮，对点击没有反应

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

jQuery click not working for dynamically created items [duplicate] (8 个回答)

已关闭 7 年前。

我正在尝试创建一个消息列表，用户可以在网站上的文本区域中键入并使用他为每条消息自动创建的按钮删除其中任何消息。我的想法是创建一个 div，首先将用户的消息放入其中，然后在按钮前面添加与 div 相同的 ID；这样我就可以调用按钮的 ID，并删除具有相同 ID 的所有元素。

<script>
var theButtonId = 1;
$(document).ready(function() {
$('#commentButton1').click(function() {
    var toAdd = $("textarea#commentTextarea1").val(); //Content to add
    var theId = "dieButtons"+theButtonId.toString(); //creating unique ID

    // Adding first Div      
    $('#targetField').append( 
        $('<div />', {
            id: theId,
            }));
    // Adding content
    $('#'+theId).append(
        $('<div />', {
             text: toAdd
             }));
    //(-----1-----)Adding Button        
    $('#'+theId).prepend(
         $('<button />', {
             type: 'button',
             id: theId,
             class: 'commentButton2',
             text: "-"
             }));
    theButtonId++;
    });
});
//Button Command
$(document).on("ready", function(){
  //(-----2-----)
$('.commentButton2').on("click", function(){  
   var thisId = $(this).attr("id");
       $("#"+thisId).remove();
});
});
</script>

它完美地列出了#textfield中的元素我直接在 HTML 代码中添加了一个按钮，该按钮使用上面的代码删除了某些 div 及其本身。这就是为什么我知道问题是在 (-----1-----) 创建的按钮不会对 (-----2-----) 中的命令使用react

我已经尝试创建一个按钮类型的输入并放置一个 .click 函数而不是 .on("click", [...])。

Answer 1

$(document).on('click', '#buttonid', function() {

});

在动态创建的元素上使用事件委托(delegate)

DOCUMENTATION