使用jQuery/JS创建的按钮，不对点击做出反应
使用jQuery/JS创建的按钮，不对点击做出反应
我正在尝试创建一个用户可以在网站的文本区域中输入的消息列表，并使用每条消息自动创建的按钮删除它们。
我的想法是先在一个div中放置用户的消息，然后在相同ID的div之前添加一个按钮；这样我就可以调用按钮的ID并删除所有具有相同ID的元素。
脚本：
var theButtonId = 1;
$(document).ready(function() {
$('#commentButton1').click(function() {
var toAdd = $("textarea#commentTextarea1").val(); //要添加的内容
var theId = "dieButtons"+theButtonId.toString(); //创建唯一ID
// 添加第一个div
$('#targetField').append(
$('
id: theId,
}));
// 添加内容
$('#'+theId).append(
$('
', {
text: toAdd
}));
// 添加按钮
$('#'+theId).prepend(
$('', {
type: 'button',
id: theId,
class: 'commentButton2',
text: "-"
}));
theButtonId++;
});
});
// 按钮命令
$(document).on("ready", function(){
$('.commentButton2').on("click", function(){
var thisId = $(this).attr("id");
$("#"+thisId).remove();
});
});
这段代码完美地在#textfield中列出了元素。
我在HTML代码中直接添加了一个按钮，使用上述代码删除了特定的div，以及删除了自身。这就是我知道问题出在(-----1-----)处创建的按钮不响应(-----2-----)命令的原因。
我已经尝试过创建一个类型为button的输入框，并在.on("click", [...])中使用.click函数，但是没有成功。
问题的原因是使用了错误的事件绑定方法。使用`$('.commentButton2').on("click", function(){`这种方式绑定点击事件，并不能正确地响应点击操作。
解决方法是改用`$('#targetField').on("click",'.commentButton2', function(){`这种方式绑定点击事件。这样做可以正确地响应点击操作，并且不会阻塞静态创建的按钮。
具体的解决方法如下所示：
$('#targetField').on("click",'.commentButton2', function(){
// 点击事件的处理逻辑
});
通过上述方法，可以成功创建并响应点击事件的按钮。感谢Pekka提供的解答。
原因：按钮是使用jQuery/JS动态创建的，但是点击事件没有响应。
解决方法：使用事件委托（event delegation）来处理动态创建的元素。
问题出现的原因是，按钮是使用jQuery/JS动态创建的，但是点击事件没有响应。为了解决这个问题，可以使用事件委托（event delegation）。事件委托是一种将事件处理程序绑定到父元素上，然后在父元素上监听子元素的事件的方法。
在这个例子中，可以使用$(document).on('click', '#buttonid', function() {});来实现事件委托。这样，无论按钮是何时创建的，都可以正常响应点击事件。
如果想了解更多关于事件委托的信息，可以参考jQuery官方文档中的事件委托部分。
通过使用事件委托，问题得到了解决。感谢guradio的帮助，也感谢其他人对这个问题的解答。虽然动态列表的场景很常见，但是在使用bootstrap元素时很难找到关于这种细节的合适文档，包括不同的场景、事件和示例。