在此对象生成的HTML元素中引用JS对象
在此对象生成的HTML元素中引用JS对象
提问于 2018-07-08 02:34:04
我的JavaScript对象创建了一些超文本标记语言元素(例如两个按钮)，在用户单击这些按钮之后，我应该调用这个对象的一些方法。所以问题是如何在HTML元素中引用JS对象来调用它的方法？
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Title Goes Here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function myObj(){
this.a = null;
this.setA = function(a){
this.a = a;
}
this.requestA = function(){
$( "body" ).append($('<input><button onclick="referenceToMyObject.setA($(this).prev().val());">Set A</button>'));
}
return this;
}
</script>
</head>
<body>
<script>
var myObjInst = myObj();
myObjInst.requestA();
</script>
</body>
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-08 22:02:08
创建事件处理程序内联(onclick="foo()")将不允许您引用对象，并且在任何情况下都不建议您这样做，因为您应该避免将字符串作为代码进行计算。此外，您的代码在某种程度上绕过了JavaScript的对象概念。您可以将其重新表示为：
function MyObj() {
this.a = null;
}
MyObj.prototype.setA = function(a) {
const old = this.a;
this.a = a;
console.log("Updated a from", old, "to", this.a);
};
MyObj.prototype.requestA = function() {
const input = $("<input type='text'>");
const button = $("<button>Set A</button>");
button.click((e) => {
this.setA($(e.target).prev().val());
});
const body = $("body");
body.append(input);
body.append(button);
};
$(document).ready(() => {
const myObjInst = new MyObj();
myObjInst.requestA();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
在这里，我们使用button.click来定义事件处理程序，使用new MyObj()来实例化对象。除此之外，我对代码进行了一些清理，并添加了一些日志记录，这样您就可以看到发生了什么。
您仍然可以在构造函数中定义setA和requestA，就像在示例中所做的那样。我选择在原型上定义它们，因为它们在实例中的行为是相同的。
Stack Overflow用户
发布于 2018-07-08 04:19:15
试试这个，请让我知道这对你是否有效。( JSFiddle https://jsfiddle.net/galeroy/9nocztk4/1/中的工作示例)
<!doctype html>
<html>
<head>
<script>
var myObject = {
createButton: function(){
var p = document.getElementById('par')
var b = document.createElement('button');
b.innerHTML = 'click me';
b.setAttribute('onclick', 'myObject.myMethod()'); // this is the important part
p.appendChild(b);
},
myMethod: function(){
alert("Button created by object, when clicked, calls another method in the same object")
}
}
function init(){
myObject.createButton();
}
</script>
</head>
<body onload="init()">
<p id="par"></p>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51225966
复制相关文章
相似问题
腾讯云开发者
