Question

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

2015-05-22

63

javascript

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

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

但是我收到范围错误： Uncaught ReferenceError：clicked 未定义 。

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

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>