jQuery事件不會觸發
[英]jQuery event doesn't fire
問題描述
我不明白為什么我的函數無法啟動，也許我選錯了選擇器？
HTML：
<html>
{% include head.html %}
<body id="general">
<header>
{% include navbar.html %}
<script>
$('input[name=optradio])'.click(function () {
if (this.id == "showdiv") {
$("#onsaanbod").show('slow');
} else {
$("#onsaanbod").hide('slow');
}
});
</script>
</header>
<div class="container-fluid">
<!-- contenttop -->
<div class="row" style="padding-top: 3%; padding-bottom: 3%;" >
{% include /getaquote/contenttop-getaquote.html %}
</div>
<div class="col-md-12 col-lg-10 col-lg-offset-2">
<div class="row">
<div class="col-md-12">
<p> content </p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr>
</div>
</div>
<!-- start-form -->
<!-- Volume -->
<div class="row">
<div class="col-md-6">
<p> content </p>
</div>
<div class="col-md-6">
<div class="controls">
<form id='form-id'>
<div class="radio">
<label><input type="radio" name="optradio">Meer dan 1000 per jaar</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Tussen 500 en 1000 per jaar</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio" id="showdiv">Minder dan 500 per jaar</label>
</div>
</form>
</div>
</div>
</div>
<div class="row" id="onsaanbod" style='display:none'>
<div class="col-md-12">
<h1 class="titlel1"> content </h1>
<p> content </p>
</div>
</div>
</div>
當用戶單擊第三個單選按鈕時，我想顯示第二個div。 我試圖更改腳本的位置，但我不認為這是問題所在。 我確定這是一個小問題。 它不起作用！
<!-- footer -->
{% include footer.html %}
</div>
</body>
5 個解決方案
解決方案1
3 2015-08-13 07:24:46
有一個錯字：
$('input[name=optradio])'.click
$('input[name=optradio]').click
和
您應該將js移動到主體底部，或將其包裝在$（document）.ready（）方法中
$(document).ready(function(){
$('input[name=optradio]').click(function () {
if (this.id == "showdiv") {
$("#onsaanbod").show('slow');
} else {
$("#onsaanbod").hide('slow');
}
});
});
當您向其應用che click偵聽器時，要確保該元素存在
解決方案2
2 已采納 2015-08-13 07:24:53
您必須將代碼包裝在
$(document).ready(function(){
//Code
});
這將確保腳本在頁面加載后激發，從而具有使用資源。 在您的情況下，您的代碼將如下所示：
$(document).ready(function(){
$('input[name=optradio]').click(function () {
if (this.id == "showdiv") {
$("#onsaanbod").show('slow');
} else {
$("#onsaanbod").hide('slow');
}
});
});
解決方案3
0 2015-08-13 07:25:59
您必須將代碼包裝到：
// A $( document ).ready() block.
$( document ).ready(function() {
console.log( "ready!" );
});
解決方案4
0 2015-08-13 07:26:16
將整個代碼包裝在里面：
$(document).ready(function(){
// Here..
});
僅在加載所有DOM元素后才執行。
解決方案5
0 2015-08-13 07:28:06
如果您已經在使用id，為什么不直接使用它呢？
確保您擁有1.7+版本的jquery才能使用prop
<script>
$(document).ready(function()
{
$('#showdiv').click(function()
{
if($(this).prop("checked"))
{
$("#onsaanbod").show('slow');
}
else
{
$("#onsaanbod").hide('slow');
}
});
});
</script>
jQuery .on click事件並不總是在Ajax加載的內容上觸發
[英]jQuery .on click event doesn't always fire on Ajax loaded content
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.