試圖阻止Javascript在頁面加載運行

我想添加一個onChange事件處理程序到我的html頁面的兩個元素。可悲的是，當頁面加載導致下游問題時，事件正在觸發。試圖阻止Javascript在頁面加載運行

$("#Division").on('click', onChangeFilter()); 
$("#Program").change(onChangeFilter()); 

function onChangeFilter() { 
    alert("Fired to soon...."); 
};

測試相關的HTML看起來像這樣

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Test</title> 
</head> 
<body> 
    <div id="DivisionSelection"> 
    <select id="Division" data-filterprogramcontrol="Program"> 
     <option value="-1">Select Division</option> 
     <option value="1">Item 1</option> 
     <option value="2">Item 2</option> 
     <option value="3">Item 3</option> 
    </select> 
    </div>  
</body> 
</html>

是增加了.change事件導致「變化」和觸發功能？我能找到的兩個最近的帖子位於here和here，但我覺得他們的問題更加透明。 jQuery API中沒有任何明顯的表明這種行爲。我剛開始在課程工作中轉向網絡世界，也許我沒有正確理解頁面加載DOM的動態。我認爲this頁面有用，但不確定有多準確。預先感謝您的指導。

來源

2015-04-02 TargetofGravity

爲什麼你有相同的ID'Division'兩個元素？ – Xufox 2015-04-02 03:38:53

刪除調用括號 - '$（「＃Division」）。on（'click'，onChangeFilter）;'。這將傳遞函數本身作爲事件後面調用的引用。 – 2015-04-02 03:39:22

@Xufox，在這個例子中忘了指定這是一個選擇Div，已更新。感謝您指出這一點。 – TargetofGravity 2015-04-02 13:06:56

你會希望每個使用onChangeFilter後刪除調用括號：

$("#Division").on('click', onChangeFilter); 
//          ^^ 
$("#Program").change(onChangeFilter); 
//        ^^

這把功能作爲任何其他（對象）的值，將它作爲參數傳遞給.on()和.change()爲他們使用並在事件觸發時調用。

否則，括號，函數被稱爲第一和return值，而不是傳遞給.on()和.change()，類似於：

var result1 = onChangeFilter(); 
$("#Division").on('click', result1); 

var result2 = onChangeFilter(); 
$("#Program").change(result2);

來源

2015-04-02 03:58:25

感謝上面的例子和評論。這確實有道理。 – TargetofGravity 2015-04-02 13:07:58

當你寫這樣的：

$("#Division").on('click', onChangeFilter());

你打電話給它。方法名後面的（）表示您正在調用它。只需在那裏寫入方法名稱即可。

代碼更少應該是這樣的：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Test</title> 
<script> 
    $(document).ready(function() { 
     var onChangeFilter = function(evt){ 
      alert("Fired to soon...."); 
     }; 
     $("#Division").on('click', onChangeFilter); 
     $("#Program").on('change', onChangeFilter); 

    }); 
</script> 
</head> 
<body> 
    <div id="Division"> 
    <select id="Program"> 
     <option value="-1">Select Division</option> 
     <option value="1">Item 1</option> 
     <option value="2">Item 2</option> 
     <option value="3">Item 3</option> 
    </select> 
    </div>  
</body> 
</html>

來源

2015-04-02 05:02:47 kangaswad

試圖阻止Javascript在頁面加載運行

回答

相關問題