無法啓動javascript事件OnClick的複選框

Question

所以我有一個複選框控件，我無法觸發一個OnClick事件。我嘗試了許多不同的方法：綁定事件onload，並在<input type="checkbox">標記中添加事件作爲參數。

這是我最近的代碼迭代。我試圖發射一個Alert，以確認它已更改。

<section class="border-bottom"> 
    <div id="approx" class="content"> 
     <h3>This is my approximate location</h3> 
     <div class="form-control-group"> 
      <div class="form-control form-control-toggle" data-on-label="yes" data-off-label="no"> 
       <input type="checkbox" /> 
      </div> 
     </div> 
    </div> 
</section> 

的JavaScript：

$('input[type="checkbox"]').bind('click', function() { 
    alert("OK"); 
}) 

我也不會介意能夠通過以下輸入來運行它：

<input type="checkbox" onclick="runMyFunction(); return false;" /> 

Answer 1

你應該使用下列方法之一：

• .click(function() { ... })
• .change(function() { ... })
• .on('click', function() { ... })

HTML：

<div section class="border-bottom"> 
    <div id="approx" class="content"> 
     <h3>This is my approximate location</h3> 
     <div class="form-control-group"> 
      <div class="form-control form-control-toggle" data-on-label="yes" data-off-label="no"> 
       <input type="checkbox" id="checkbox" /> 
      </div> 
     </div> 
    </div> 
</section> 

的JavaScript：

$('#checkbox').change(function() { 
    alert("OK"); 
}); 

Answer 2

一些插件的要求：

$("#checkbox").on('change', function() { 
    // content 
}); 

，或者尋找你的插件的使用說明書（有時你需要使用：pluginName.change換取其他城市）

Answer 3

首先使用jQuery函數內部$（document）.ready函數，以確保DOM已準備就緒，如：

 $(document).ready(function() { 
      $('input[type="checkbox"]').bind('click', function() { 
       alert("OK"); 
      }) 
     }); 

https://jsfiddle.net/4fmL1zfr/8/