Question

我想为所有五个复选框使用我自己的事件处理程序。我在代码中创建了一个复选框，然后将其克隆四次。

我对此代码的问题：我可以选中并取消选中第一个复选框（代码中的复选框）。但是第一个复选框不使用我的事件处理程序，而是它自己的（我在我的设置中设置了一个断点） “$（'input：checkbox'）。live（'click'，function（event）{...”代码，如果单击第一个复选框，则永远不会到达。其他四个框到达我的事件处理程序，但如果我只点击一个，则会检查所有四个框。如果第一个框（代码中的那个框）被选中，我只能检查四个框，如果未选中第一个框，我只能取消选中它们。似乎有很多我不明白的副作用。这是完整的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
</head>
<body onfocus="readvalues()">
<div id="mypage" data-role="page" data-theme="a">
<script>
$(document).ready(function () {
   $('input:checkbox').live('click', function (event) {       
    event.preventDefault();
    event.stopPropagation();
    if ($(this).prop('checked')) {
         $(this).prop('checked', false);
         //$(this).removeAttr('checked');
         $(this).checkboxradio("refresh");
         //$(this).attr("checked",false).checkboxradio("refresh");
     } else {
         $(this).prop('checked', true);    
         //$(this).attr('checked', true);
         $(this).checkboxradio("refresh");
     }
     //$(this).prop('checked', true);    
     //$(this).attr('checked', true).checkboxradio('refresh');
     $(this).checkboxradio("refresh");
     //$(selector).trigger('create');    
   });
});    
</script>

  <div data-role="fieldcontain" id="fieldcontainid">
    <fieldset data-role="controlgroup" id="fieldsetid">
       <div id="sample">
       <input id="checkboxsample" class="custom" type="checkbox" data-iconpos="left" name="checkboxsample">
       <label id="labelsample" for="checkboxsample">Test</label>
       </div>
       <div id="existing"></div>
    </fieldset>
  </div>
<script>
readvalues = function()
{

    var existing = document.getElementById('existing');
    existing.textContent = '';

    for (i=0; i<=3; i++)  
    {  
        var clonecheckbox = $("#sample").clone(false);
        $("#existing").append(clonecheckbox);
        clonecheckbox.attr("id",i.toString());
        $("#"+i.toString()).children().children().eq(0).attr("id","cb"+i.toString());
        $("#"+i.toString()).children().children().eq(0).attr("name","cb"+i.toString());

        $("#"+i.toString()).children().children().eq(1).attr("id","label"+i.toString());
        $("#"+i.toString()).children().children().eq(1).attr("for","cb"+i.toString());
    }
}
</script>
</div>
</body>
</html>

我的代码中有哪些更改要使用我自己的事件处理程序四个所有五个复选框？我的事件处理是否检查/取消选中复选框是否正确？

Answer 1

不推荐使用

live方法和:checkbox选择器，尝试使用on方法，同时请注意，在克隆输入时，您应该在添加它们之前更改它们IDs，拥有多个元素的ID会使您的标记无效，一种解决方案是使用类而不是ID。

$(document).on('change', 'input[type="checkbox"]', function(){
  // ...
})

Answer 2

将代码移动到函数并将其绑定到原始函数：

$(document).ready(function () {
   $('input:checkbox').on('click', doTheWork);
}); 

function doTheWork(event)   {
        event.preventDefault();
        event.stopPropagation();
        if ($(this).prop('checked')) {
             $(this).prop('checked', false);
             //$(this).removeAttr('checked');
             $(this).checkboxradio("refresh");
             //$(this).attr("checked",false).checkboxradio("refresh");
         } else {
             $(this).prop('checked', true);    
             //$(this).attr('checked', true);
             $(this).checkboxradio("refresh");
         }
         //$(this).prop('checked', true);    
         //$(this).attr('checked', true).checkboxradio('refresh');
         $(this).checkboxradio("refresh");
         //$(selector).trigger('create');    
       }

然后，当您创建复选框时，只需执行以下操作：

clonecheckbox.click(doTheWork);

动态创建的复选框的事件处理程序不起作用

2 个答案: