Konnte ID von dynamisch erzeugtem Kontrollkästchen nicht bekommen

Question

Ich habe Kontrollkästchen dynamisch erstellt, auf jedem Klon erhöhe ich die ID des Kontrollkästchens und lege den gleichen Namen auf die Klasse des Divs, auf der ich die Aktion ausführen möchte, nachdem ich das überprüft habe Kontrollkästchen.
Nun ist das Problem, dass, wenn Checkbox mit neuer ID beim Klicken auf diese neue Box kloniert wird, die Warnung nicht funktioniert, obwohl ich die gleiche Klasse auf alten und neuen Kontrollkästchen habe. Ich habe den Klon js-Code nicht eingefügt, aber es funktioniert, alle Felder werden mit neuen IDs und Klassen geklont.
Hier ist das Snippet für checkbox html und JS.

var chauffeur_index = $('.check_chauffer').length - 1; 
 
$('.check_chauffer').last().attr('id', 'Chauffeur_details_' + chauffeur_index); 
 
$('.Chauffeur_details').last().addClass('Chauffeur_details_' + chauffeur_index); 
 

 
$(function() { 
 
    $(".check_chauffer").change(function() { 
 
    alert(this.id); 
 
    if ($(this).is(":checked")) { 
 
     $('.' + this.id).removeClass("hidden"); 
 
    } else { 
 
     $('.' + this.id).addClass("hidden"); 
 
    } 
 
    }); 
 
})

.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<input type="checkbox" class="check_chauffer" id="Chauffeur_details_0" name="check_chauffer">Chauffeur 
 
<div class="clearfix"></div> 
 
<input type="checkbox" class="check_airport" name="check_airport" id="airport_details_0">Airport 
 
<span class="help-block"></span> 
 

 
<div class="Chauffeur_details_0 hidden"> 
 
    <div class="col-md-2 booking_details"> 
 
    <h6><strong>Booking Details:</strong></h6> 
 
    </div> 
 
    <div class="col-md-2"> 
 
    <label for="">Per Hour Rate</label> 
 
    <div class="input-group"> 
 
     <input type="number" name="Chauffeur_per_hour_rate[]" class="form-control " required="required"> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-2"> 
 
    <label for="">Min Hours/Day</label> 
 
    <div class="input-group"> 
 
     <input type="number" name="Chauffeur_min_hours_booking[]" class="form-control " required="required"> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-2"> 
 
    <label for="">Max Hours/Day</label> 
 
    <div class="input-group"> 
 
     <input type="number" name="Chauffeur_max_hour_perday[]" class="form-control" required="required"> 
 
    </div> 
 
    </div> 
 
</div>

wenn anyother Code bitte fragen Sie mich erforderlich ist.

Answer 1

Ihre erste Frage ist, sollten Sie eine delegate an den Ereignishandler hinzuzufügen.

Mit der .on()-Methode können Sie einen beliebigen Event-Handler an folgende Elemente delegieren: aktuelle Elemente oder zukünftige Elemente, die dem DOM zu einem späteren Zeitpunkt hinzugefügt werden können.

$(document).on('click', '.check_chauffer', function() { 
    alert(this.id); 
}); 

Die zweite Sache ist, um sicherzustellen, dass Sie es in document.ready hinzuzufügen.

$(document).ready(function() { 
    $(document).on('click', '.check_chauffer', function() { 
     alert(this.id); 
    }); 
}); 

Reference of direct-and-delegated-events

Answer 2

Verwenden Ereignis Delegation für dynamisch erstellen Attribute und Elemente in dem dom elements.It ermöglicht es uns, einen einzelnen Ereignis-Listener für Elemente zu befestigen, die jetzt oder in Zukunft bestehen. Innerhalb der Ereignisbehandlungsfunktion.

$(document).on('change', ".check_chauffer", function(){ 
    alert(this.id); 
});