空的jQuery選擇器打破了腳本的其餘部分

我的網站的每個頁面都有一組不同的jQuery特效以及使用ajax提交的表單。我遇到了一個空的jQuery選擇器阻止其他javascript運行的問題。例如：空的jQuery選擇器打破了腳本的其餘部分

// site.js 
$(document).ready(function() { 

function changeText() { 
$("#div1").html("Test 1"); 
$("#div2").html("Test 2"); 
} 

$("#button1").click(changeText()); 
$("#button2").click(changeText()); 

}); 

// page1.html 
<script src="/static/jquery.js"></script> 
<script src="/static/site.js"></script> 
<div id="div1">Div 1</div> 
<input type="button" value="Change" id="button1"> <!-- Works //--> 

// page2.html 
<script src="/static/jquery.js"></script> 
<script src="/static/site.js"></script> 
<div id="div2">Div 2</div> 
<input type="button" value="Change" id="button2"> <!-- Doesn't work //-->

我到目前爲止的解決方案是爲每個頁面創建單獨的javascript文件，但必須有其他方法。有任何想法嗎？我是否真的需要在if $("selector").length調用中包裝每個選擇器，以便腳本不會中斷？

來源

2012-01-28 Jonathan Gelbart

不，你不需要在jquery檢查empty或undefined，它是由implicitly做jquery。

也可以改寫爲下面的代碼，更少的代碼更好的性能

$("#button1,#button1").click(function(){ 
    $("#div1").html("Test 1"); 
    $("#div2").html("Test 2"); 
});

來源

2012-01-28 09:02:24

感謝您重申jQuery自動執行此操作。事實證明，問題在於對'document.getElementById（）'的調用破壞了一切。我切換到一個jQuery調用，一切都很好。謝謝！ – 2012-01-28 19:11:44

我不知道這是否是問題，但你沒有正確地聲明點擊事件處理程序：

$("#button1").click(changeText());

如果你把括號，該函數直接調用。

應該是：

$("#button1").click(changeText);

據我所知，jQuery的總是返回，如果沒有DOM元素被匹配它根本不包含任何元素（長度= 0）。

來源

2012-01-28 08:51:02

如果我需要傳遞一個參數，所以我可以做一個典型的'e.preventDefault（）;'？此外，當我在我的例子中聲明函數時，是否應該在'$（document）.ready（）'函數內部進行？ – 2012-01-28 17:23:15

當調用事件處理程序時，jquery將自動傳遞事件對象，只需在函數'function changeText（e）{...}'中聲明該參數即可。你不必把它們放在準備好的處理程序中。 – 2012-01-29 10:26:46

空的jQuery選擇器打破了腳本的其餘部分

回答

相關問題