定義Javascript / JQuery函數

Question

內部定義javascript函數的正確方法是什么

$(document).ready(function () {
});

或者就在外面。

我有的是這個：

$(function() {
  var html = '<div class ="new1" ><img id = "new2" onclick = "showPage(' + id + 
      ');" class = "' + id + 
      '" src="@Url.Content("~/Images/blankpageQ.jpg")" />' + 
      i + '</div>');
  $(".pageListQuiz")
    .children('div')
    .eq(numOfPages - 1)
    .append(html);

  function showPage() {
    //some actions
  }
});

並單擊附加的圖像會引發異常：

Unhandled exception at line 3, column 1 in script block

0x800a1391 - JavaScript runtime error: 'showPage' is undefined

If there is a handler for this exception, the program may be safely continued.

（js代碼是從我的c＃代碼中嵌入的。）。 如果我在外面放置showPage()一切正常。 我只是想知道為什么當我把它放在里面時它不起作用，因為我也有內置的功能，只是工作正常。

Answer 1

函數delarations的范圍與var語句類似。

如果在另一個函數中定義一個函數，那么只能在該函數的范圍內訪問它。

如果要將其作為全局訪問（這是像onclick=那樣的內部事件屬性），那么您需要將其定義為全局或將其復制到全局范圍。

但是，在這種情況下，您應該避免使用全局變量。 您還應該避免使用內部事件屬性並通過將字符串混合在一起來構建HTML。

這是未經測試但應該給你的想法。

$(function () {

  var id = "something";
  var numOfPages = 2;

  var html = $("<div/>")
    .addClass("new1")
    .append(
      $("<img/>")
        .attr("id", "new2")
        .on("click", showPage.bind(null, id))
        .addClass(id)
        .attr("src", '@Url.Content("~/Images/blankpageQ.jpg")')
    );
  $(".pageListQuiz")
    .children('div')
    .eq(numOfPages - 1)
    .append(html);

  function showPage(id) { 
  }

});

Answer 2

@Tushar的方法

想法：創建函數並使用$(document).ready()來執行必要的功能。

的jsfiddle

$(document).ready(function(){
    ...
})

function showPage(el){
  console.log(el);
}

---

我的方法

想法：您可以擁有一個事件處理程序，而不是設置onclick屬性。 這種方法的好處是，您可以將標記生成邏輯清理干凈。

的jsfiddle

---

請注意，您可以合並兩種方法。 最好聲明所有函數，然后使用$(document).ready()作為初始化函數。 這只會調用不同的功能。 如果您選擇使用event handlers/delegates ，您也可以將所有事件導出到不同的文件，然后調用它。

Answer 3

在您的示例中，您將在頁面的HTML中創建一個<img>元素。 單擊它時，將調用showPage() 。 由於函數是從全局范圍調用的（因為它是通過單擊HTML進入全局范圍調用的），因此查找全局范圍是否存在showPage()函數。 但是，它並不存在於全球范圍內; 它僅存在於$(function() {})函數的范圍內。

如果要從全局范圍訪問showPage() ，則需要確保它在那里可用。 你可以通過在$(function() {})構造之外定義它（ function聲明創建一個新的作用域），或者通過在$(function() {})構造之外定義一個var並指定showPage()這showPage()函數到那個var。 例如：

var showPage;

$(function() {
    // Assign the function showPage() to the var showPage:
    showPage = function showPage() {
        // You function body.
    }
});

// showPage is now available in the global scope.

兩種解決方案都可以。 也許你可以讀一下Javascript范圍和閉包 。 這將有助於您了解這里發生的事情。