Question

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

// 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');
});

Answer 1

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

以下代码可能有效，您可以在您的情况下尝试

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

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

1 个答案: