复选框更改/单击事件未触发答案

【问题标题】：Checkbox Change / Click event not firing复选框更改/单击事件未触发
【发布时间】：2013-08-04 03:18:19
【问题描述】：

我遇到了复选框单击事件的问题。用户将填写 5 个输入，这些输入创建输入值的全局变量。用户然后填写表格的其余部分，然后单击验证复选框以同意规则/规定。此复选框应填充一个隐藏的文本区域，其中包含 5 个变量和一些预先确定的文本。

它似乎大部分都在工作，但是我收到了一些空白条目。因此复选框触发事件未正确触发。我已经进行了广泛的浏览器测试，但无法查明原因。

我正在使用 Shortstack 应用平台上的一些自定义代码，用于 facebook 的竞赛/抽奖。

我尝试了以下两种方法来触发事件，但都没有解决问题。

$('#promotion_agree').change(function() {

和

$('#promotion_agree').on("click", function(event) {

我的代码如下。非常感谢任何帮助。

<script type="text/javascript">

jQuery(document).ready(function($) {

//Fade out the Agree to Rules/Regulations checkbox

$('#promotion_agree_block').fadeOut();

//Input Field 1
$('#promotion_custom_field_2').bind("keyup change", function() {
  fieldone = $(this).val();
  $('#promotion_custom_field_5').val(fieldone);
});

//Input Field 2
$('#promotion_custom_field_3').bind("keyup change", function() {
  fieldtwo = $(this).val();
  $('#promotion_custom_field_7').val(fieldtwo);
});

//Input Field 3
$('#promotion_custom_field_4').bind("keyup change", function() {
  fieldthree = $(this).val();
  $('#promotion_custom_field_8').val(fieldthree);
});

//Input Field 4
 $('#promotion_custom_field_17').bind("keyup change", function() {
   fieldfour = $(this).val();
   $('#promotion_custom_field_9').val(fieldfour);
});

//Input Field 5
$('#promotion_custom_field_18').bind("keyup change", function() {
  fieldfive = $(this).val();
  $('#promotion_custom_field_37').val(fieldfive);
  $('#promotion_agree_block').fadeIn();  
});



////Post the global variables to the hidden textarea along with the included text

$('#promotion_agree').on("click", function(event) { 

//The following code is placed in the textarea field that is hidden

$('#promotion_image_description').html('' + fieldone + ' walked through The Fair, after     enjoying the Superdogs show where he saw lots of ' + fieldtwo + ', ' + fieldthree + ' dogs. They leapt through hoops and over jumps and ' + fieldfour + ' with their trainers. He thought about how great it would be if his dog ' + fieldfive + ' became a Superdog! Maybe one day...\r\n\r\n Submitted Words: ' + fieldone + ', ' + fieldtwo + ', ' + fieldthree + ', ' + fieldfour + ', ' + fieldfive + ''.replace(/\r\n/g, '\n').split('\n')); 


  });
});
</script>

编辑到下面的原始帖子...

HTML 代码如下所示：

这是其中一个输入的样子：

<div class="field_block custom_field_2_field_block text_field_type_block center-input" id="promotion_custom_field_2_block">
<label for="promotion_custom_field_2"><span class="main_field_label">Field One</span><span class="required">*</span></label>
<input class="small" id="promotion_custom_field_2" name="promotion[custom_field_2]" type="text">
</div>

这是触发事件发布到文本区域的复选框：

<div class="field_block agree_field_block black-text" id="promotion_agree_block" style="display: block;">
<label for="promotion_agree"><input id="promotion_agree" name="promotion[agree]" type="checkbox" value="1"> <span class="main_field_label">I have read and agree to the rules &amp; regulations</span><span class="required">*</span></label>
</div>

选中上面的复选框后，文本区域如下所示。

<div class="field_block image_description_field_block" id="promotion_image_description_block">
<label for="promotion_image_description"><span class="main_field_label">MadLib Story</span></label>
<textarea class="medium" id="promotion_image_description" name="promotion[image_description]">test1 walked through The Fair, after enjoying the Superdogs show where he saw lots of test2, test3 dogs. They leapt through hoops and over jumps and test4 with their trainers. He thought about how great it would be if his dog test5 became a Superdog! Maybe one day...

提交词：test1, test2, test3, test4, test5

二次编辑 这是我的 Javascript 代码的编辑，用于在输入每个元素时填充描述字段。由于某种原因，表单不会填充提交时的描述文本，所以我认为这可能有效：

<script type="text/javascript">

jQuery(document).ready(function($) {


$('#promotion_custom_field_2').bind("keyup change", function() {
//Create Global Variable for Text entered
  fieldone = $(this).val();

  //Add Global Variable to Hidden Field
  $('#promotion_custom_field_5').val(fieldone);

  //Update Description Field if Changed
  $('#promotion_image_description').html('' + fieldone + ' walked through The Fair, after enjoying the Superdogs show where he saw lots of '
                                         + fieldtwo + ', ' + fieldthree + ' dogs. They leapt through hoops and over jumps and ' 
                                         + fieldfour + ' with their trainers. He thought about how great it would be if his dog ' 
                                         + fieldfive + ' became a Superdog! Maybe one day...\r\n\r\n Submitted Words: ' + fieldone + ', ' + fieldtwo + ', ' + fieldthree + ', ' + fieldfour + ', ' + fieldfive + ''.replace(/\r\n/g, '\n').split('\n'));

});



$('#promotion_custom_field_3').bind("keyup change", function() {
//Create Global Variable for Text entered
  fieldtwo = $(this).val();

  //Add Global Variable to Hidden Field
  $('#promotion_custom_field_7').val(fieldtwo);

  //Update Description Field if Changed
  $('#promotion_image_description').html('' + fieldone + ' walked through The Fair, after enjoying the Superdogs show where he saw lots of '
                                         + fieldtwo + ', ' + fieldthree + ' dogs. They leapt through hoops and over jumps and ' 
                                         + fieldfour + ' with their trainers. He thought about how great it would be if his dog ' 
                                         + fieldfive + ' became a Superdog! Maybe one day...\r\n\r\n Submitted Words: ' + fieldone + ', ' + fieldtwo + ', ' + fieldthree + ', ' + fieldfour + ', ' + fieldfive + ''.replace(/\r\n/g, '\n').split('\n'));


});

$('#promotion_custom_field_4').bind("keyup change", function() {
//Create Global Variable for Text entered
  fieldthree = $(this).val();

  //Add Global Variable to Hidden Field
  $('#promotion_custom_field_8').val(fieldthree);

  //Update Description Field if Changed
  $('#promotion_image_description').html('' + fieldone + ' walked through The Fair, after enjoying the Superdogs show where he saw lots of '
                                         + fieldtwo + ', ' + fieldthree + ' dogs. They leapt through hoops and over jumps and ' 
                                         + fieldfour + ' with their trainers. He thought about how great it would be if his dog ' 
                                         + fieldfive + ' became a Superdog! Maybe one day...\r\n\r\n Submitted Words: ' + fieldone + ', ' + fieldtwo + ', ' + fieldthree + ', ' + fieldfour + ', ' + fieldfive + ''.replace(/\r\n/g, '\n').split('\n'));

});

   $('#promotion_custom_field_17').bind("keyup change", function() {
   //Create Global Variable for Text entered
  fieldfour = $(this).val();

  //Add Global Variable to Hidden Field
  $('#promotion_custom_field_9').val(fieldfour);

  //Update Description Field if Changed
  $('#promotion_image_description').html('' + fieldone + ' walked through The Fair, after enjoying the Superdogs show where he saw lots of '
                                         + fieldtwo + ', ' + fieldthree + ' dogs. They leapt through hoops and over jumps and ' 
                                         + fieldfour + ' with their trainers. He thought about how great it would be if his dog ' 
                                         + fieldfive + ' became a Superdog! Maybe one day...\r\n\r\n Submitted Words: ' + fieldone + ', ' + fieldtwo + ', ' + fieldthree + ', ' + fieldfour + ', ' + fieldfive + ''.replace(/\r\n/g, '\n').split('\n')); 

});

   $('#promotion_custom_field_18').bind("keyup change", function() {
//Create Global Variable for Text entered
  fieldfive = $(this).val();

  //Add Global Variable to Hidden Field
  $('#promotion_custom_field_37').val(fieldfive);

  //Update Description Field if Changed
  $('#promotion_image_description').html('' + fieldone + ' walked through The Fair, after enjoying the Superdogs show where he saw lots of '
                                         + fieldtwo + ', ' + fieldthree + ' dogs. They leapt through hoops and over jumps and ' 
                                         + fieldfour + ' with their trainers. He thought about how great it would be if his dog ' 
                                         + fieldfive + ' became a Superdog! Maybe one day...\r\n\r\n Submitted Words: ' + fieldone + ', ' + fieldtwo + ', ' + fieldthree + ', ' + fieldfour + ', ' + fieldfive + ''.replace(/\r\n/g, '\n').split('\n')); 


 });


  });
  </script>

【问题讨论】：

是dom里面的代码准备好了....也分享html标记
我看到您同时使用bind 和on，您使用的是哪个版本的jQuery？ ...另外，您是否遇到任何控制台错误？
没有控制台错误。也使用 IE 开发人员工具对其进行了检查。因为我使用的是shortstack，所以表单是自动生成的，所以除了添加一个类之外我无法控制html。很难提取 html，但我会看看我能拼凑出什么。
只需从元素检查器中复制 HTML
如果我理解正确，您只是将一些值存储在一个隐藏元素中，您似乎没有在其他地方使用，那么您怎么知道该功能没有被触发？

标签： jquery internet-explorer checkbox

【解决方案1】：

试试这个复选框更改事件

$(document).ready(function(){
    $("input[type=checkbox]").change(function(){
        if($(this).is(":checked")){
            alert("Checked");
             //$(this).siblings("input[type=checkbox]").removeAttr("checked");
           }else{
            alert("Unchecked")  
           }
        });

});

【讨论】：

在 OP 尝试时通过 id 抓取复选框会更有意义（如果有其他复选框），OP 说他已经尝试使用 change() 并且回调没有运行所以此时没有理由担心它是否被检查。

【解决方案2】：

遇到同样的问题，看到这个帖子。

因为我只是在做一个测试，所以我决定把点击调用放在复选框上：

<input id="chk_selected" name="chk_selected" type="checkbox"
       value="@x.GetValue("pic_pk_Idx_n")" onclick="clickchange(this)" />

所以我会说如果你有这个问题，使用这个。

但是，找出以下行出现问题的原因很重要：

$('#chk_selected').change(function () {
    $('#chk_selected').on("click", function (event) {

请注意，这可能是 jQuery 版本问题（我在 AJAX 调用中遇到了这个问题）。

【讨论】：