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

功能延迟的范围与var语句类似。

如果在另一个函数中定义一个函数，那么你只能在该函数的范围内访问它。

如果要将其作为全局访问（这是onclick=之类的内部事件属性），那么您需要将其定义为全局或将其复制到全局范围。

但是，在这种情况下，您应该避免使用全局变量。您还应该避免使用intrinsic event attributes并通过将字符串拼接在一起来构建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并指定{{1}来实现此目的。函数到那个var。例如：

showPage()

两种解决方案都可以。也许你可以在Javascript scopes and closures上读一下。这将有助于您了解这里发生的事情。

定义Javascript / JQuery函数

3 个答案:

@Tushar的方法

我的方法