Question

我的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>

Answer 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()实例化对象。除此之外，我还整理了一些代码并添加了一些日志记录，以便您了解发生了什么。

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

Answer 2

尝试一下，如果适合您，请告诉我。（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>

在此对象生成的HTML元素中引用JS对象

2 个答案: