HTML <select> JQuery .change不工作

好吧我不明白爲什麼這不工作。看起來很簡單。HTML <select> JQuery .change不工作

這裏是我的下拉菜單：

<div> 
    <form> 
     <select id='yearDropdown'> 
      <c:forEach var="years" items="${parkYears}"> 
       <option value=/events.html?display_year=${years}<c:if test="${currentYear == years}">selected="selected"</c:if>>${years}</option> 
      </c:forEach> 
     </select> 
    </form> 
</div>

這裏是JavaScript

$("#yearDropdown").change(function() { 
    alert('The option with value ' + $(this).val()); 
});

現在我只是想獲得它的工作，所以我可以添加功能。謝謝！

來源

2012-06-26 theCamburglar

什麼是控制的渲染輸出（查看源代碼，檢查元素等）？ –

原諒我，我不知道你問什麼。我是CS學生。我幾乎沒有javascript的知識 – theCamburglar

你有沒有在$（document）.ready（function（）{this code here}）中運行;或者只是一個$（function（）{CODE HERE}）; ？看起來對我來說是正確的... – ntgCleaner

該代碼在語法上是正確的。最有可能在錯誤的時間運行它。

你要綁定事件時DOM準備：

$(function(){ /* DOM ready */ 
    $("#yearDropdown").change(function() { 
     alert('The option with value ' + $(this).val()); 
    }); 
});

或者，使用live：

$("#yearDropdown").live('change', function() { 
    alert('The option with value ' + $(this).val()); 
});

或者，使用delegate：

$(document.body).delegate('#yearDropdown', 'change', function() { 
    alert('The option with value ' + $(this).val()); 
});

或者，如果您使用的是jQuery 1.7+：

$("#yearDropdown").on('change', function() { 
    alert('The option with value ' + $(this).val()); 
});

儘管如此，它通常是最好的，一旦瀏覽器呈現完畢標記來執行腳本。

來源

2012-06-26 21:29:34 xandercoded

這並不重要，因爲'.change'將應用於每個新添加的元素。（如果不正確，請糾正我的錯誤） –

@Derek：你錯了，它適用於執行該行時與表達式（#yearDropdown）匹配的元素。 jQuery不監視新元素或類似的東西。 – WhyNotHugo

@ user1469925不同之處在於，一旦文檔完成加載並調用DOM，就會調用該函數。您的代碼在讀取後立即執行，並且DOM可能尚未準備好 - 選擇尚不存在。 – WhyNotHugo

你的代碼是正確的，是爲我工作，在這裏看到：http://jsfiddle.net/mobweb/2Skp9/

確定的jQuery已正確安裝？

來源

2012-06-26 21:31:41

不知道這是否會幫助，但你可以試試這個：

$("#yearDropdown").live("change", function() { 
    alert('The option with value ' + $(this).val()); 
});

來源

2012-06-26 21:34:22 Logard

'從jQuery 1.7開始，.live（）方法已被棄用。使用.on（）附加事件處理程序。 ' –

這是？需要閱讀發佈說明，然後我猜。謝謝（你的）信息。 – Logard

http://liveisdeprecated.com –

我曾嘗試你的代碼in jsFiffle。我手動添加了幾年作爲選項。它的工作原理正確。

只需綁定的$（document）中。就緒的.change事件：

$(document).ready(function(){ 
    $("#yearDropdown").change(function() { 
     alert('The option with value ' + $(this).val()); 
    }); 
});

來源

2012-06-26 21:36:26

HTML <select> JQuery .change不工作

回答

相關問題