无法访问对话框标题中的元素答案

【问题标题】：cant access element in dialog title无法访问对话框标题中的元素
【发布时间】：2023-04-08 19:45:01
【问题描述】：

我似乎无法获得对标题栏中按钮的单击事件的引用，但如果它们位于对话框的常规内容区域中，我可以单击它们。谁能指出我正确的方向，以便能够从标题栏中的按钮注册点击事件？

// Define the player details window dialog
var dialog = $(".graph-container").dialog({
    autoOpen: false,
    modal: true,
    show: {
        effect: "clip",
        duration: 1000
    },
    hide: {
        effect: "explode",
        duration: 2000,
        complete: function () {
            console.log('complete');
        }
    },
    width: modalWindow.width,
    height: modalWindow.height,
    resizable: false,
    beforeClose: function (event, ui) {
        console.log('before close function');
    },
    position: {
        my: 'center',
        at: 'center',
        of: window
    }
});

// Override the undocumented _title property to allow HTML in the title
// More info: http://stackoverflow.com/questions/4103964/icons-in-jquery-ui-dialog-title
dialog.data("uiDialog")._title = function (title) {
    title.html(this.options.title);
};
dialog.dialog('option', 'title', '<span class="left">Stats for ' + player.PlayerName + ' - Last ' + $scope.gameFilter + ' games</span>' +
        '<span class="right"><div id="dateButtonDiv">' +
        '<button class="dateButton">5</button>' +
        '<button class="dateButton">25</button>' +
        '<button class="dateButton">100</button>' +
        '</div></span>');

$(".graph-container").dialog("open");

$('.dateButton').click(function () {
    var btn = this;
    console.log('Date button clicked');
});

【问题讨论】：

标签： javascript jquery jquery-ui web

【解决方案1】：

您的元素会动态地进入 dom，因此正常的点击事件对它们不起作用。您必须在文档对象上绑定事件并将其委托给动态类。

以下代码可能有效，您可以根据自己的情况进行尝试

$(document).on('click', '.dateButton' , function() {
  var btn = this;
  console.log('Date button clicked');
});

【讨论】：