gpt4 book ai didi

javascript - 无法在 JavaScript 的点击事件中访问它

转载 作者:行者123 更新时间:2023-12-04 19:44:27 24 4
gpt4 key购买 nike

下面是我正在处理的一个简单的模态对话框脚本。它使用 Bootstrap Modal 作为它的 CSS 端。

我的目标是制作一个简单的模态对话框,它将显示并要求用户执行操作(确定或取消按钮单击)。我想通过允许在这些单击事件发生时传入和调用一些回调函数,使其在未来的项目中灵活使用。还有一些其他选项喜欢显示或不显示取消按钮。 (我还没有添加那部分)

所以我正在做的是让函数接受一个选项/设置的对象。我也有默认选项/设置,用户选项然后合并到其中,允许用户选项是可选的,并覆盖默认值(如果存在)。

我知道有几种方法可以做到这一点,但这是我从我尊敬的 JS 开发人员那里学习的几个项目中看到的方法。

下面是我的 JavaScript 代码、一个带有代码的 JSFiddle 页面和一个用于查看结果的 JSFiddle 输出页面。

在代码中间有一条注释//PROBLEM AREA DOES NOT CALL THE CALLBACK FUNCTION

在这方面,到目前为止我已经尝试了 3 种不同的东西......

this.options.cancelCallback(); // This is what I wanted to work!
zPanel.dialog.confirm.options.cancelCallback(); Tried this 2nd
options.cancelCallback(); // This Works if there is a user defined callback but errors when not

所以我现在在那个领域的问题是,当我调用 this.options.cancelCallback() 时,它应该持有回调函数,如果用户传递一个回调函数应该被重新分配给这个属性,如果用户没有,它至少应该看到一个空的默认值。

我认为 this 部分是乱七八糟的,因为它在 onclick 函数中..顺便说一下,这对我来说看起来不像是正常的点击事件,我在另一个项目中看到了它“工作”

所以我得到的错误信息是Uncaught TypeError: Cannot call method 'okCallback' of undefined

有人可以告诉我如何解决或改进这个问题吗?谢谢。

JSFiddle http://jsfiddle.net/jasondavis/dymn5/

全屏预览 http://jsfiddle.net/jasondavis/dymn5/show/result/

var zPanel = {

dialog: {

confirm: function (options) {

var i;

// Default options
this.options = {
message: "", // String: Default Message
cancelButton: true, // Boolean: Show Cancel Button
okButton: true, // Boolean: Show Ok Button
cancelCallback: function () {}, // Function: Callback function when Cancel button clicked
okCallback: function () {} // Function: Callback function when Ok button clicked
};
// Merge User defined options
for(i in options) {
if(i in this.options) {
this.options[i] = options[i];
} else {
throw new Error("Notice doesn't support option: " + i);
}
}

var container = document.createElement('div');
//template for modal window
container.innerHTML += '<div class="modal-content confirm">' +
'<div class="modal-body">' +
'<div>' + this.options.message + '</div>' +
'<div class="controls">' +
'<button type="button" class="btn primary">OK</button>' +
'<button type="button" class="btn">Cancel</button>' +
'</div>' +
'</div>' +
'</div>';

//modal window
var modal = container.firstChild;
container = document.createElement('div');
container.innerHTML = '<div class="modal-backdrop fade in"></div>';
//dark background
var background = container.firstChild;

//Find OK button
var ok = modal.getElementsByTagName('button')[0];
ok.onclick = function () {
modal.parentNode.removeChild(modal);
document.body.removeChild(background);

// PROBLEM AREA DOES NOT CALL THE CALLBACK FUNCTION
this.options.okCallback();
//zPanel.dialog.confirm.options.okCallback();
//options.okCallback(); // Works if there is a user defined callback
}

//Find Cancel button
var cancel = modal.getElementsByTagName('button')[1];
cancel.onclick = function () {
modal.parentNode.removeChild(modal);
document.body.removeChild(background);

// PROBLEM AREA DOES NOT CALL THE CALLBACK FUNCTION
this.options.cancelCallback();
//zPanel.dialog.confirm.options.cancelCallback();
//options.cancelCallback(); // Works if there is a user defined callback
}

document.body.appendChild(background);
document.body.appendChild(modal);
}

}

}

// Create a Dialog on Click event
$('#delete_btn').click(function () {
zPanel.dialog.confirm({
message: 'Are you sure you want to delete action?',
cancelCallback: function(){alert('user pressed Cancel button')},
okCallback: function () {alert('id deleted')},
});
});

最佳答案

this 的上下文在函数内部发生变化,尤其是事件处理程序。这也是使用 setTimeout 时的常见问题。

this 将引用事件发生的元素。解决此问题的一种方法是将 this 的值存储在处理程序外部的新变量中容器函数,然后在处理程序中引用该变量。

所以在你的 confirm 方法中添加这样的东西:

var self = this;

在你的处理程序中,使用:

self.options.cancelCallback();

演示: http://jsfiddle.net/dymn5/3/

以及为传递的回调提供处理程序上下文的方法,您可以使用此方法:

self.options.cancelCallback.apply(this, arguments);

cancelCallbackthis 的值将是事件发生的元素,并将传递给它的任何参数,如 事件 对象。

这允许您将其用于您的选项:

.confirm({
cancelCallback: function (e) {
// `this` refers to the button
// `e` refers to the event
}
});

关于javascript - 无法在 JavaScript 的点击事件中访问它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15982733/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com