javascript - jquery 对话框中自己的按钮不起作用

Question

我正在创建一个包含大量文本区域的应用程序，每个文本区域都有一个按钮。如果用户编辑内容，它将被保存到数据库中。单击该按钮时，将打开一个对话框并显示该特定区域内容的所有早期版本。这是由该对话框中的 .html() 加载的。现在我想在该对话框中的每个早期版本上都有一个按钮。单击该按钮时，此早期版本应复制到“主”站点的文本区域。

我的问题:即使有警报，我也无法使按钮工作。我哪里错了？

打开对话框，工作:

$( ".historydialog" ).click(function( event ) {
    var idhist = $(this).attr('id');
    $( "#dialog" ).dialog({
        open: function(event, ui) {
            $.get( "getLangHist.php", { idhist: idhist }, function( data ) {
                $( "#divInDialog" ).html( data );
            }); 
        },
        maxWidth:600,
        maxHeight: 500,
        width: 600,
        height: 500
    });
    event.preventDefault();
});

对话框中的按钮:

<button id="history-{id}" class="historybutton">

按钮操作，不起作用:

$(".historybutton").click(function( event ) {
    alert('test');
});

Answer 1

您提到您正在使用 .html() 将内容添加到对话框中

这意味着您正在将内容动态添加到 DOM

如果是这种情况，那么您可以更改您的 click处理程序:

$(document).on('click', '.historybutton', function(){
  alert('test');
});

这将绑定(bind) click动态添加内容的处理程序。

作为旁注。不要在控件中添加分隔 ID，例如 "history-{id}"你可以使用data-属性。查看代码时，这一点也更加明显。

所以你的按钮是:

<button data-history-id="123" class="historybutton">history</button>

然后您可以使用data访问它jQuery 中的方法

var hId = $('.historybutton').data('history-id') ;