問題與jQuery代碼顯示和隱藏div

我有一個小腳本，顯示一個複選框，選中時，它顯示一個選擇列表。這在jsfiddle中可以正常工作，但在網頁上使用時不會。問題與jQuery代碼顯示和隱藏div

該網頁只包含與jsfiddle相同的代碼，不多不少。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

<script type="text/javascript"> 
$(".depository").hide(); 
$("#ImageSelection_0").click(function() { 
    if($(this).is(":checked")) { 
     $(".depository").show(); 
    } else { 
     $(".depository").hide(); 
    } 
}); 
</script> 

Image depository: <input type="checkbox" name="ImageSelection" value="1" id="ImageSelection_0" /> 
Local image: <input type="checkbox" name="ImageSelection" value="2" id="ImageSelection_1" /> 


<div class="depository"> 
<select name="CompanyName" id="name" onChange="get();" class="imaindatesel"> 
    <option value="0">Select...</option> 

    <option value="1">Test 1</option> 
    <option value="2">Test 2</option> 
    <option value="3">Test 3</option> 

</select> 
</div>

的SJFiddle：https://jsfiddle.net/Blackbox/mLvtmhrm/

任何人都可以明白爲什麼這不我的網頁上運行？

非常感謝您的意見。

來源

2015-10-27 DCJones

你能告訴我們實際的網站嗎？（因爲這是問題所在） – indubitablee

在網頁中會發生什麼？控制檯中有任何錯誤嗎？用'docuement.ready'包裝你的代碼。 – Manwal

如果這是它在您的網站上訂購的方式，則問題在於，當該腳本塊運行時，ImageSelection_0不存在*。在jsFiddle中，腳本不會運行，直到後來，在'onLoad'時間。將你的腳本移動到'$（document）.ready（）'處理程序，或者至少移到'body'標記的末尾。 –

您必須將所有jQuery代碼放在document.ready事件上。

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".depository").hide(); 
    $("#ImageSelection_0").click(function() { 
     if($(this).is(":checked")) { 
      $(".depository").show(); 
     } else { 
      $(".depository").hide(); 
     } 
    }); 
}); 
</script>

你必須這樣做，因爲當你嘗試將事件處理程序或將其應用jQuery函數的DOM不存在，而在此jsfidle工作，我不知道原因。

來源

2015-10-27 13:04:52 Burimi

或放在頁面的末尾。 – hjpotter92

正確和它在jsfiddle中工作的原因，因爲你在jsfiddle的JavaScript部分編寫的scriptlet將被嵌入在window.load函數中，這意味着DOM和其他資源被加載。 – Akki619

@ Akki619他們可能只在DOM準備就緒時纔會評估JavaScript，因此他們可以從Javascript中訪問用戶輸入的Javascript，這很有意義。 – Burimi

問題與jQuery代碼顯示和隱藏div

回答

相關問題