Question

我想创建一个具有onclick事件处理程序作为方法的JavaScript类：

<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function () {
  var foo = new Foo();
  foo.load();
});
function Foo() {
  function clicked() {
    alert('clicked');
  }
  this.load = function () {
    $('#container').html('<button onclick="clicked()">Press</button>');  
  }
}
</script>
</head>
<body>
  <div id="container"></div>
</body>
</html>

但我收到范围错误：未捕获的ReferenceError：未定义点击。

为什么呢？如何修复范围并将事件处理程序保留为类的方法？

Answer 1

将按钮创建为对象，并直接指定单击处理程序：

<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function () {
  var foo = new Foo();
  foo.load();
});
function Foo() {
  function clicked() {
    alert('clicked');
  }
  this.load = function () {
    var b = $('<button>');
    b.text('Press');
    b.on('click', clicked);
    $('#container').append(b);  
  }
}
</script>
</head>
<body>
  <div id="container"></div>
</body>
</html>

这样做可以直接引用函数本身，因为它总是在范围内。通过onclick属性进行分配，它会失去声明它的范围。

Answer 2

您可以通过直接链接到该功能来避免这种情况：

$('#container').html('<button>Press</button>').find('button').click(clicked);

Answer 3

试试这个

<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function () {

        foo.load();
});
var foo = new Foo();
function Foo() 
{
this.clicked=clicked;
function clicked() 
{
        alert('clicked');
}

this.load = function () 
{
        $('#container').html('<button onclick="foo.clicked();">Press</button>');  
}
}
</script>
</head>
<body>
  <div id="container"></div>
</body>
</html>

如何将onlick事件处理程序作为类方法

3 个答案: