如何將onlick事件處理程序作為類方法

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>

但是我收到范圍錯誤： 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>

如何將onlick事件處理程序作為類方法

問題描述

3 個解決方案

解決方案1
2 已采納 2015-05-22 09:13:27

解決方案2
0 2015-05-22 09:17:54

解決方案3
0 2015-05-22 09:21:28

如何將onlick事件處理程序作為類方法

問題描述

3 個解決方案

解決方案1 2 已采納 2015-05-22 09:13:27

解決方案2 0 2015-05-22 09:17:54

解決方案3 0 2015-05-22 09:21:28

解決方案1
2 已采納 2015-05-22 09:13:27

解決方案2
0 2015-05-22 09:17:54

解決方案3
0 2015-05-22 09:21:28