ReferenceError：使用onclick時未定義函數

Question

我使用javascript設置了一個錨標簽，以便onclick ，我調用一個函數showSavingsEasterEgg並傳遞一個值。 我得到的問題是我沒有正確引用我的功能：

ReferenceError: showSavingsEasterEgg is not defined

我已經嘗試將showSavingsEasterEgg函數移動到showData函數中以查看它是否解決了作用域問題，但事實並非如此。

有小費嗎

define(["jquery", "go/util", "underscore", "jqueryui/slider"], function ($, util,_) {

  function showData(data) {
    $('#item').append('<a class="savings_link" href="#" onclick=\'showSavingsEasterEgg('+data[key]['saving']+')\'> Savings');
  }

  function showSavingsEasterEgg(data){
    console.log("SUccess");
    console.log(data);
  }

});

Answer 1

將showSavingsEasterEgg的定義直接放在全局范圍中。

在這里，它無法找到。

你可以這樣做 ：

window.showSavingsEasterEgg = function (data){
    console.log("SUccess");
    console.log(data);
};
define(["jquery", "go/util", "underscore", "jqueryui/slider"], function ($, util,_) {
  function showData(data) {
    $('#item').append('<a class="savings_link" href="#" onclick=\'showSavingsEasterEgg('+data[key]['saving']+')\'> Savings');
  }
});

Answer 2

想知道為什么沒有人提出迄今為止最明顯，最方便和“最佳實踐”的方法。 你根本不應該使用內聯事件處理 ，不要引人注目。

$('#item').append($('<a>', {
    'class':    'savings_link',
    href:       '#',
    click:      function(e) {
        console.log("SUccess");
        console.log(data);
    }
}});

Answer 3

使showSavingsEasterEgg全局化。 您只能從html代碼中調用全局可訪問的對象/引用。

 window.showSavingsEasterEgg = function(data){
    console.log("SUccess");
    console.log(data);
  }

Answer 4

您應該了解並理解任何編程語言中"scope"的定義。 請將名為"showSavingsEasterEgg"的函數移出父函數的一側，它將像魅力一樣工作。 這是因為您將其定義為父函數的私有成員。

干杯