爲什麼我不能使用onClick在jQuery $（document）.ready函數中執行函數？

我是新來的Javascript和jQuery。我想點擊一個按鈕並執行一個js函數。（對於這個例子，這只是一個警報，但它實際上是一個阿賈克斯函數。）

第一個警報出現，但是當我單擊按鈕後，我從來沒有看到第二個（「做過」）警報。它看起來像javascript不認爲doIt（）函數是在點擊按鈕時定義的。

下面是相關代碼：

$(document).ready(function() 
{ 
    alert('ready'); 

    function doIt() { 
     alert('did it'); 
    }; 
} 
) 

<body> 
    <input name="Go" type="button" value="Go" onclick="doIt();"/> 
</body>

來源

2010-07-30 jalperin

這是因爲該功能在全球範圍內，這是你的onclick=""正在尋找它。您需要將其移到外面的document.ready（所以它不是完全作用域是閉合），或document.ready內將其綁定（更好的IMO的方法），這裏就是我的意思是每個：

內綁定它（刪除您onclick=""此）：

$(document).ready(function() { 
    alert('ready'); 
    $("input[name='Go']").click(doIt); 
    function doIt() { 
    alert('did it'); 
    } 
});

或匿名版本（再次刪除您onclick=""）：

$(document).ready(function() { 
    alert('ready'); 
    $("input[name='Go']").click(function() { 
    alert('did it'); 
    }); 
});

或外部移動它（保持你的onclick=""）：

$(document).ready(function() { 
    alert('ready'); 
}); 
function doIt() { 
    alert('did it'); 
}

來源

2010-07-30 13:03:44

或將它保留在裏面，但聲明它是一個全局函數（保持你的onclick） – Konerak 2010-07-30 13:13:23

我實際上做這些，根據情況。例如，我有時會使用包含Javascript的.ascx文件，並且當我這樣做時，將函數放在限制函數的範圍內，但其他時候我想要一個我從多個包含的全局函數 - 在這種情況下，我將該功能移到範圍之外。所以，這兩個選項都有用處。 – 2010-07-30 13:19:25

你需要做的是使用jQuery這樣的「click」事件綁定到它。

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

    $('#my_button').click(function() { 

     alert('i was clicked'); 

    }); 
}); 

<input type="button" id="my_button" value="Go" />

這裏是爲您直播的jsfiddle演示：http://jsfiddle.net/8A5PR/

這裏是你的手冊頁：http://api.jquery.com/click/

來源

2010-07-30 13:03:42

不，onClick是正確的。 – Konerak 2010-07-30 13:04:38

@Konerak我認爲你錯過了這一點，它允許你從標籤中提取onclick事件管理，並將它放入帶有函數的javascript中，因此你可以在執行功能保持不變的情況下管理與標記分開的代碼（行爲）相同 - 處理頁面上元素的點擊事件。 – 2010-07-30 13:10:27

@Mark - 我不認爲@Konerak完全錯過了這一點。這個答案表明你*「需要使用jquery綁定一個點擊事件給我們」*。這是不正確的。用jQuery綁定事件是一個選項，但你不需要這樣做。 – user113716 2010-07-30 13:15:20

你在你的document.ready作爲一個函數語句定義doIt方法。

要麼你應該使用函數表達式 或聲明函數了準備功能的。

$(document).ready(function() 
{ 
    alert('ready'); 

    doIt = function() { //now has global scope. 
     alert('did it'); 
    }; 
} 
) 

<body> 
    <input name="Go" type="button" value="Go" onclick="doIt();"/> 
</body>

（是的，的onClick是不是真的這樣做，而且也應該在準備函數定義的點擊事件處理被替換的jQuery的方式，但它作品，並允許。

來源

2010-07-30 13:04:17 Konerak

你確定這可以嗎？「doIt」仍在本地範圍內聲明。 – fearofawhackplanet 2010-07-30 13:11:13

如果我會把'var doIt'，你會是對的。省略'var'聲明一個全局變量。 – Konerak 2010-07-30 13:12:22

+1然後教我新的東西。這是一個jQuery功能或適用於一般的JavaScript？ – fearofawhackplanet 2010-07-30 13:20:08

什麼你現在正在做的只是把一個函數doIt（）放在一個（所有意圖和目的）window.onload事件中，除非你將它綁定到一個元素，否則它將永遠不會被調用document.ready的範圍

您需要移動您的fu因此可以通過外部事件調用。

只是一個小鏈接以供參考：http://www.webdevelopersnotes.com/tutorials/javascript/global_local_variables_scope_javascript.php3

來源

2010-07-30 13:06:15

從文檔：「With $（document ）.ready（），你可以讓你的事件加載或觸發，或者在窗口加載之前讓你想要它們做的任何事情。「 http://docs.jquery.com/Tutorials:Introducing_$（document）.ready（） – 2010-07-30 13:23:24

哦，我犯了一個錯誤，我猜這是在window.onload之前。 – 2010-07-30 13:46:39

只是理解:)不是一個錯誤:)另一種說法是「當DOM準備就緒」時，這樣頁面可能不會100％渲染，但DOM（文檔對象模型）已準備就緒。 – 2010-07-30 13:50:33

嘗試......

$(document).ready(function() { 


    alert('ready'); 


     $("#Go").submit(function(event) { 
      alert('did it'); 
     }); 

}); 

<input name="Go" id="Go" type="button" value="Go" />

來源

2010-07-30 13:06:21

可能是我遲到發佈回答因爲答案已經發布.. 不用擔心:) – 2010-07-30 13:08:03

JavaScript有兩種範圍，全局和功能級別。如果你在一個函數內部聲明doIt，它在函數外部是不可見的。有幾種方法來解決它

//just declare the function outside the ready function 
$(function() { 
}); 
function doIt() { alert('did it'); } 

//decare a variable outside the function 
var doIt; 
$(function() { 
    doIt = function() { alert('did it'); } 
}); 

// if you dont use var, variables are global 
$(function() { 
    doIt = function() { alert('did it'); } 
})

來源

2010-07-30 13:07:15

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

是一個事件處理程序的document.ready，該處理程序中的功能是範圍之內。

一個更好的方法是在你的click事件中插入一個處理程序，然後在那裏調用該函數。

$(document).ready(function() 
{ 
    alert('ready'); 

    $('body input').click(function(){ 
    doIt(); 
    }); 
    function doIt() { 
     alert('did it'); 
    }; 
});

這也有從您的標記刪除代碼中的副作用（一件好事），你可以從你的輸入標籤的onclick刪除。

來源

2010-07-30 13:07:35

是的，正如其他人所提到的，您真的需要將該功能移到jquery ready聲明之外。另請注意，javascript區分大小寫，因此您應該使用onClick而不是onclick。問候

來源

2010-07-30 13:08:15 Muleskinner

其實，它不是javascript。它是一個HTML屬性。 'onclick'將會工作得很好，就像'oNcLiCk'一樣。 – user113716 2010-07-30 13:28:17

爲什麼我不能使用onClick在jQuery $（document）.ready函數中執行函數？

回答

相關問題