在克隆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 */ });

對於動態加載的元素。