Question

我需要使用bootstrap动态显示复选框的符号。当我单击父复选框时，我的子框不会被单击。使用静态加载我可以检查它，但是当我在JavaScript中保持一致代码并在单击按钮时运行它时，我无法单击子复选框。

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<script>
function getAccordiance()
{
 var html ='';
 html+='<div class="box-body subjectareaComparsion"> <div class="panel-group" id="accordion"><div class="panel panel-default"><div class="panel-heading">';
  html+='<h4 class="panel-title"><input type="checkbox" id="chckHead"  class="chckHead" value="subject1"/>';
  html+='<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Sample1</a></h4> </div><div id="collapseOne" class="panel-collapse collapse in">';
 html+=' <div class="panel-body"><table class="table table-striped"><tr><td><div class="checkbox"> <input type="checkbox" id="checkbox" class="chcktbl" />';
  html+='<label for="checkbox">List group item heading</label></div></td></tr> </table></div> </div></div> <div class="panel panel-default">';
 html+='<div class="panel-heading"> <h4 class="panel-title"><input type="checkbox" id="chckHead"  class="chckHead" value="subject2"/>';
 html+='<a data-toggle="collapse" data-parent="#accordion" href="#collapsetwo"> Sample2</a></h4></div><div id="collapsetwo" class="panel-collapse collapse">';
  html+='<div class="panel-body"><table class="table table-striped"><tr> <td> <div class="checkbox"><input type="checkbox" id="checkbox" class="chcktbl" />';
  html+='<label for="checkbox">List group item heading</label> </div></td></tr>  </table> </div></div>  </div></div> </div>';
  $('#dataload').html(html);
  }
</script>
</head>
<body class="skin-blue">
<header class="header"> <a href="index.html" class="logo"> 
</header>
<div class="wrapper row-offcanvas row-offcanvas-left"> 
   <aside class="right-side"> 
    <!-- Content Header (Page header) -->
    <section class="content-header">

      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">Sample</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row "> 
        <!-- left column -->
        <div class="col-md-6"> 
          <!-- Subject Area -->
          <div class="box box-primary">
            <div class="box-header">
              <h3 class="box-title"> Area</h3>
            </div>
            <button  onclick="getAccordiance()">Submit</button> 
                    <div id="dataload"></div>


          </div>
        </div>
      </div>            
    </section>
    <!-- /.content --> 
  </aside>
  <!-- /.right-side --> 
</div>
<!-- ./wrapper --> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script> 
<script type="text/javascript">
 $('.chckHead').on('click',function () {
    alert("Hi");
    $(this).closest('.panel').find(".chcktbl").prop('checked', $(this).prop('checked'));
});


</script>
</body>
</html>

Answer 1

您需要委派click事件，因为复选框是动态生成的。More on delegate

$(document).on('click', '.chckHead', function () {
    alert("Hi");
    $(this).closest('.panel').find(".chcktbl").prop('checked', $(this).prop('checked'));
});

Demo Fiddle

Answer 2

在此演示：http://jsfiddle.net/m3o7u7Lm/2/（在您的评论中根据您的演示构建）

$('.childCheckBox').on('click', function() {
    // do stuff here
});

.on（＆＃39; click＆＃39;，function（）{}）将动态添加的元素添加到dom中。

此外，如果你构建一个模板然后像这样克隆（也在演示中显示）而不是使用jquery来构建html，那么对你来说会更容易：

<div class="content">
    <fieldset id="template">
        <label><input type="checkbox" class="parentCheckBox">Parent</input></label>
        <label><input type="checkbox" class="childCheckBox">Child 1</input></label>
        <label><input type="checkbox" class="childCheckBox">Child 2</input></label>
    </fieldset>
</div>

<a href="#" class="add">Add Another</a>

$('.add').on('click', function(event) {
    event.preventDefault();

    $('#template').clone(true).attr('id', '').appendTo('.content');
});

希望这有帮助！

使用bootstrap单击父复选框时，无法检查子复选框

2 个答案: