0

我的 JavaScript 对象创建了一些 HTML 元素（例如两个按钮），在用户单击这些按钮后，我应该调用该对象的一些方法。所以问题是我如何在 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>

4

2 回答 2

1

内联创建事件处理程序 ( 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()实例化对象。除此之外，我稍微清理了代码并添加了一些日志记录，这样您就可以看到发生了什么。

您仍然可以在构造函数中定义setAand requestA，就像您在示例中所做的那样。我选择在原型上定义它们，因为它们的行为在实例之间是相同的。

于 2018-07-08T14:02:08.300 回答
0

试试这个，如果这对你有用，请告诉我。（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>
于 2018-07-07T20:19:15.427 回答