在克隆div我不能呼叫jquery功能

Question

您好工作在一个模拟测试门户和在这个门户网站有一个部分称为多选择组合，我们同时使用复选框和单选按钮。 即将到场景我必须添加/追加一个特定的Div类到相同的Div类多于一个'。DIV类包含复选框等。为了添加/追加我已经使用克隆jQuery。在这个复选框有一个jQuery的功能是在父级Div类中工作，它不在小孩（克隆）工作。希望为这种情况获得更好的解决方案谢谢大家。

<div id="addresses"> 
      <div class="address" id="address0"> 
      <div class="join"> 
      <div class="col s12 m12"> 
      <div class="card-panel lighthen-4 black-text" style="width:850px;"> 
     <div class="row"> 
     <p><span style="background-color:Black;color:white;font- 
     size:25px">Question</span><div id="number"></div> 
     <div class="input-field col s12"> 
     <textarea id="textarea14" class="materialize-textarea"></textarea> 
     <label for="textarea14">Question</label> 
     </div> 

      <div class="switch"> 
      <label> 
      Off 
      <input class="checker" type="checkbox" id="checker0"/> 
      <span class="lever"></span> 
      On 
      </label> 
      </div> 
      <script type="text/javascript"> 
      $(function() { 

      $("#checker0").click(function() { 


      if ($(this).is(":checked")) { 

      $("#cmcq0").hide(); 
      $("#mcq0").show(); 
      } else { 

      $("#cmcq0").show(); 
      $("#mcq0").hide(); 
      } 
      }); 
      }); 
      var rowNum = 0; 
     <div class="checker" id="mcq0"style="display:none;"> 
<p> 
<input type="radio" name="group" id="test9" /> 
<label for="test9">Choice A<div class="input-field col s12"><textarea id="textarea15" class="materialize-textarea"></textarea></div></label> 

</p> 
<p> 
<input type="radio" name="group" id="test10" /> 
<label for="test10">Choice B<div class="input-field col s12"><textarea id="textarea16" class="materialize-textarea"></textarea></div></label> 

</p> 
<p> 
<input type="radio" name="group" id="test11" /> 
<label for="test11">Choice C<div class="input-field col s12"><textarea id="textarea17" class="materialize-textarea"></textarea></div></label> 

</p> 
<p> 
<input type="radio" name="group" id="test12" /> 
<label for="test12">Choice D<div class="input-field col s12"><textarea id="textarea18" class="materialize-textarea"></textarea></div></label> 

</p> 

</div> 
</div> 


<div class="checker" id="cmcq0"> 
<p> 
<input type="checkbox" id="test13" /> 
<label for="test13">Choice A<div class="input-field col s12"><textarea id="textarea19" class="materialize-textarea"></textarea></div></label> 
</p> 
<p> 
<input type="checkbox" id="test14" /> 
<label for="test14">Choice B<div class="input-field col s12"><textarea id="textarea20" class="materialize-textarea"></textarea></div></label> 
</p> 
<p> 
<input type="checkbox" id="test15" /> 
<label for="test15">Choice C<div class="input-field col s12"><textarea id="textarea21" class="materialize-textarea"></textarea></div></label> 
</p> 
<p> 
<input type="checkbox" id="test16" /> 
<label for="test16">Choice D<div class="input-field col s12"><textarea id="textarea22" class="materialize-textarea"></textarea></div></label> 
</p> 





</div> 
</div> 
</div> 

</div> 
<div class="addmoreadd"> 
<button type="button" class="addmore">Add More Address</button> 
</div> 


     $("body").on("click", ".addmore", function() { 
     rowNum++; 
     var $address = $(this).parents('.address'); 
     var nextHtml = $address.clone(); 
     nextHtml.attr('id', 'address' + rowNum); 
     nextHtml.find('checker').prop('id', 'checker' + rowNum,'mcq' + rowNum); 
     var hasRmBtn = $('.rmbtn', nextHtml).length > 0; 
     if (!hasRmBtn) { 
     var rm = "<button type='button' class='rmbtn'>Remove</button>" 
     $('.addmoreadd', nextHtml).append(rm); 
     } 
     $address.after(nextHtml); 
     }); 

     $("body").on("click", ".rmbtn", function() { 
     $(this).parents('.address').remove(); 
     }); 
     }); 

      </script> 

Answer 1

对多个元素使用相同的id这不是一个好习惯。元素ID在整个文档中应该是唯一的。相反，您可以像这样使用classes。如果您将使用相同的id，则单击事件将仅发生在文档中带有id的第一个元素上。此外，使用on事件侦听器来执行动态附加元素的事件。

$("body").on("click", ".checker", function() { 
 

 

 
    if ($(this).is(":checked")) { 
 

 
    $(this).closest(".address").find(".cmcq0").hide(); 
 
    $(this).closest(".address").find(".mcq0").show(); 
 
    } else { 
 

 
    $(this).closest(".address").find(".cmcq0").show(); 
 
    $(this).closest(".address").find(".mcq0").hide(); 
 
    } 
 
}); 
 

 
var rowNum = 0; 
 
$("body").on("click", ".addmore", function() { 
 
    rowNum++; 
 
    var $address = $(this).parents('.address'); 
 
    var nextHtml = $address.clone(); 
 
    nextHtml.attr('id', 'address' + rowNum); 
 
    nextHtml.find('checker').prop('id', 'checker' + rowNum, 'mcq' + rowNum); 
 
    var hasRmBtn = $('.rmbtn', nextHtml).length > 0; 
 
    if (!hasRmBtn) { 
 
    var rm = "<button type='button' class='rmbtn'>Remove</button>" 
 
    $('.addmoreadd', nextHtml).append(rm); 
 
    } 
 
    $address.after(nextHtml); 
 
}); 
 

 
$("body").on("click", ".rmbtn", function() { 
 
    $(this).parents('.address').remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="addresses"> 
 
    <div class="address" id="address0"> 
 
    <div class="join"> 
 
     <div class="col s12 m12"> 
 
     <div class="card-panel lighthen-4 black-text" style="width:850px;"> 
 
      <div class="row"> 
 
      <p><span style="background-color:Black;color:white;font- 
 
      size:25px">Question</span> 
 
       <div id="number"></div> 
 
       <div class="input-field col s12"> 
 
       <textarea id="textarea14" class="materialize-textarea"></textarea> 
 
       <label for="textarea14">Question</label> 
 
       </div> 
 

 
       <div class="switch"> 
 
       <label> 
 
       Off 
 
       <input class="checker checker0" type="checkbox" /> 
 
       <span class="lever"></span> 
 
       On 
 
       </label> 
 
       </div> 
 

 
       <div class="checker mcq0" style="display:none;"> 
 
       <p> 
 
        <input type="radio" name="group" id="test9" /> 
 
        <label for="test9">Choice A<div class="input-field col s12"><textarea id="textarea15" class="materialize-textarea"></textarea></div></label> 
 

 
       </p> 
 
       <p> 
 
        <input type="radio" name="group" id="test10" /> 
 
        <label for="test10">Choice B<div class="input-field col s12"><textarea id="textarea16" class="materialize-textarea"></textarea></div></label> 
 

 
       </p> 
 
       <p> 
 
        <input type="radio" name="group" id="test11" /> 
 
        <label for="test11">Choice C<div class="input-field col s12"><textarea id="textarea17" class="materialize-textarea"></textarea></div></label> 
 

 
       </p> 
 
       <p> 
 
        <input type="radio" name="group" id="test12" /> 
 
        <label for="test12">Choice D<div class="input-field col s12"><textarea id="textarea18" class="materialize-textarea"></textarea></div></label> 
 

 
       </p> 
 

 
       </div> 
 
      </div> 
 

 

 
      <div class="checker cmcq0"> 
 
      <p> 
 
       <input type="checkbox" id="test13" /> 
 
       <label for="test13">Choice A<div class="input-field col s12"><textarea id="textarea19" class="materialize-textarea"></textarea></div></label> 
 
      </p> 
 
      <p> 
 
       <input type="checkbox" id="test14" /> 
 
       <label for="test14">Choice B<div class="input-field col s12"><textarea id="textarea20" class="materialize-textarea"></textarea></div></label> 
 
      </p> 
 
      <p> 
 
       <input type="checkbox" id="test15" /> 
 
       <label for="test15">Choice C<div class="input-field col s12"><textarea id="textarea21" class="materialize-textarea"></textarea></div></label> 
 
      </p> 
 
      <p> 
 
       <input type="checkbox" id="test16" /> 
 
       <label for="test16">Choice D<div class="input-field col s12"><textarea id="textarea22" class="materialize-textarea"></textarea></div></label> 
 
      </p> 
 

 

 

 

 

 
      </div> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    <div class="addmoreadd"> 
 
     <button type="button" class="addmore">Add More Address</button> 
 
    </div>

附：更改ID #cmcq0到.cmcq0类，#mcq0到.mcq0类，并添加on事件侦听器.checker

Answer 2

一个的jsfiddle能帮上忙，

尝试$(document).on('event','#element', function() { /* code here */ });

对于动态加载的元素。