具有动态绑定内容的自调用函数范围

Question

我已将自己的JavaScript包装在自调用函数中以保持所有内容。 Hoever，我遇到了一个问题，即我的链接动态构建，在点击时返回一个错误“Function not defined”。让我有我的相关代码：

(function(window, document, $) { 

    function buildChapterList() { 
     for(var i=0; i<Object.keys(theChapterCues).length; i++) { 
      chapterListHTML = "<li><a class='fun-blue' href='javascript:void(0)' onClick=\"skipToChapter('"+ i +"')\">"+ theChapterCues[i]["title"] +"</a></li>"; 
      $(chapterListHTML).appendTo("ul#chapter-list"); 
      $("body").bind("DOMNodeInserted", function() { 
       $(this).find('#chapter-list li').first().addClass("active"); 
      }); 
     } 
    } 
    function skipToChapter(theChapter) { 
     if (theChapter == 0) { 
      theVideo.currentTime=0; 
     } else { 
      var thisChapterStart = parseInt(cues[theChapter]["chapterStart"]+1); 
      theVideo.currentTime=thisChapterStart/frameRate; 
     } 
    } 

}(this, this.document, this.jQuery)); 

当点击我收到以下错误生成的链接之一：

未捕获的ReferenceError：我失去了对范围的东西skipToChapter没有定义

？这是一个有约束力的问题？任何建议将不胜感激。谢谢！

Answer 1

skipToChapter函数只在外部匿名函数中可见。你可以在这里阅读关于Javascript的范围：http://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/

解决这个问题的快速和肮脏的方法将是定义skipToChapter匿名函数之外或作为窗口对象的成员。

例如：

window.skipToChapter = function(theChapter) { 
    if (theChapter == 0) { 
     theVideo.currentTime=0; 
    } else { 
     var thisChapterStart = parseInt(cues[theChapter]["chapterStart"]+1); 
     theVideo.currentTime=thisChapterStart/frameRate; 
    } 
} 

然而，要知道，这是不是一个功能结合事件的最佳实践，因为它使skipToChapter全球和使用内联事件处理程序（http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/）。

一个更好的办法是：

function buildChapterList() { 
    for(var i=0; i<Object.keys(theChapterCues).length; i++) { 
     chapterListHTML = "<li><a class='fun-blue' href='javascript:void(0)' data-index='" + i + "'>"+ theChapterCues[i]["title"] +"</a></li>"; 
     var $chapterListHTML = $(chapterListHTML); 
     $chapterListHTML.appendTo("ul#chapter-list"); 
     $chapterListHTML.find('a').click(skipToChapter); 
     $("body").bind("DOMNodeInserted", function() { 
      $(this).find('#chapter-list li').first().addClass("active"); 
     }); 
    } 
} 
function skipToChapter() { 
    var theChapter = $(this).data('index'); 
    if (theChapter == 0) { 
     theVideo.currentTime=0; 
    } else { 
     var thisChapterStart = parseInt(cues[theChapter]["chapterStart"]+1); 
     theVideo.currentTime=thisChapterStart/frameRate; 
    } 
} 

阅读这个答案的详细信息，事件绑定在dinamically创建的元素，用jQuery：Event binding on dynamically created elements?

Answer 2

的skipToChapter功能在全球范围内，所以不能从内联点击处理程序调用。相反，您应该在建立链接时分配点击处理程序，并采用如下所示的不显眼的方式。如果你这样指定，那么skipToChapter就在范围之内，你不必将它设为全局的，并且你不需要不需要的内联事件处理程序。

function buildChapterList() { 
    for(var i=0; i<Object.keys(theChapterCues).length; i++) { 
     chapterListHTML = $("<li><a class='fun-blue' href='javascript:void(0)'>"+ theChapterCues[i]["title"] +"</a></li>"); 
     (function(i){ 
      chapterListHTML.find('a').click(skipToChapter.bind(this, i)); 
     })(i); 
     chapterListHTML.appendTo("ul#chapter-list"); 
     $("body").bind("DOMNodeInserted", function() { 
      $(this).find('#chapter-list li').first().addClass("active"); 
     }); 
    } 
}