谷歌Chrome開發者工具在控制台中與Jquery一起出現問題

Question

當我嘗試在Google Chrome的開發者工具中執行以下JQuery代碼時

$("#u_16_0").val("AJ College, Sivakasi")

我得到以下錯誤：

未捕獲錯誤：<[EX [[“嘗試獲取id為\\”％s \\“的元素，但頁面上不存在。”，“＃u_16_0”]]]>（...）h @ LGuPoDEwQGD.js： 36i @ LGuPoDEwQGD.js：36（匿名函數）@ VM580：1

有人可以幫我解決這個問題嗎？ 我已經驗證該元素存在於頁面中。 我的意思是如果我只是在控制台中鍵入$("#u_16_0") ，則會打印該元素。

請參閱以下鏈接，其中包含我的Google Chrome版本信息的屏幕截圖。

[

更新 - 1

我設法用下面的普通javascript代碼完成了這個

document.getElementById("u_16_0").value="University of Cambridge"

更新 - 2

Amin基於jQuery的答案也奏效了。 因此，接受它作為答案並授予賞金。

Answer 1

注意 ：不要指望$總是JQuery。

Chrome控制台似乎無法訪問內容腳本的執行上下文。

錯了，確實如此。 你需要看看正確的地方：

您必須選擇chrome-extension://<your extension id> ，而不是動畫中的<page context> chrome-extension://<your extension id>

您可以在您的Chrome版本中單擊下方的“頂部”。

之前的截屏視頻顯示，Chrome開發者工具的控制台選項卡底部有兩個下拉框，可用於更改開發人員工具控制台的執行環境。
左側可用於更改幀上下文（頂部框架，因此iframe，...），右側可用於更改腳本上下文（頁面，內容腳本，...）。

參考： 為什么jQuery不會加載到Facebook？

Answer 2

問題是當你假設$總是jQuery而它不是。 查看它是否是console.log($)簡單方法，並查看它返回的內容。

jQuery通常會返回

function (selector,context){return new jQuery.fn.init(selector,context)}

要么

function (a,b){return new n.fn.init(a,b)}

現在任何人都可以將$定義$任何東西。 在Facebook上，它似乎是document.getElementById()的別名，並且在其中有一些檢查

function i(j){return h(j);}

運行$("contentCol")將返回一個DOM元素。

如果未定義$ ，則在Chrome開發工具中，它是document.querySelector的別名

$(selector, [startNode]) { [Command Line API] }

所以最后，不要指望$是jQuery。

Answer 3

從看到這個答案看起來好像你打電話給：

$("#u_16_0")

實際上並沒有調用jQuery。

嘗試更改頁面上下文

Answer 4

這是因為jQuery $ sign與其他庫如某些facebook js庫沖突。 你應該使用jQuery而不是$ ：

jQuery("#u_16_0").val("AJ College, Sivakasi");