Lier les événements sur les éléments créés dynamiquement insérés par AJAX (case à cocher)

Je suis nouveau avec jQuery. J'ai écrit un code pour ajouter des produits d'une table à l'autre sur la manière contrôlée dynamiquement comme cette FIDDLE : ce code fonctionne bien pour moi comme vous pouvez le voir dans le violon.

Maintenant, j'ai manipulé ce code en générant dynamiquement cette liste de produits (du tableau 2) en utilisant ajax, maintenant ce code ne fonctionne pas pour moi …

Comme j'ai pensé à ce défaut, ce que je pense que mes scripts CSS et JS sont chargés avec le chargement de la page, MAIS CETTE BOITE DE VÉRIFICATION (TABLEAU 2) ENTRAÎNÉ DYNAMIQUEMENT QU'EST-CE QUE JS N 'EST PAS ENTRETENIR …

Alors, comment déclencher la fonction d'événement sur le champ de saisie chargé dynamiquement … ne veulent que ce script s'améliorer: JQUERY 1.6.4

Voici mon point de vue:

 <div class="_25"> <?php echo form_dropdown('class', $dropdown_class,'','id="clas"'); ?> </div> <div class="_25"> <?php echo form_dropdown('section',$dropdown_section); ?> </div> <table class="table" border="1"> <thead><tr> <th>Select</th> <th>Cause</th> <th>Monthly Charge</th> </tr></thead> <tbody id="selectedServices"></tbody> <tr> <td>Total-</td> <td>Fee</td> <td id="total">1500</td> </tr> </table> <!-- product list (will generate dynmiclly)like tble 2 in fiddle --> <table id="abcd" class="table" border="1"> <thead><tr> <th>Select</th> <th>Cause</th> <th>Monthly Charge</th> </tr></thead> <tbody id="name_sec"> <!-- here your dat will appear as per selection of class ajax check the below function and related controller mthod the value will come with chk box for selection ad prepering the data--> </tbody> </table>

Voici mon script:

 <script language="javascript"> jQuery(function ($) { $("#clas").change(function() { var send_data=$("#clas").val(); $.ajax({ type:"post", url:"show_additional_fee_chkbox_select", data:"send_data_post_for_chkbox="+send_data, success:function(data){ $("#name_sec").html(data); } }); }); $(":checkbox").change(function () { // Toggle class of selected row $(this).parent().toggleClass("rowSelected"); // Get all items name, sum total amount var sum = 1500; var arr = $("#abcd :checkbox:checked").map(function () { sum += Number($(this).parents('tr').find('td:last').text()); return $(this).parents('tr').clone(); }).get(); // Display selected items and their sum $("#selectedServices").html(arr); $("#total").text(sum); $('#selectedServices :checkbox').change(function() { $('#selectedServices :checkbox:unchecked').parents('tr').remove(); }); }); }); </script>

Et mon contrôleur:

 public function show_additional_fee_chkbox_select() { $class=$_POST['send_data_post_for_chkbox']; //here goes ur process to display list of extra/additional fee $extra_fee_list=''; $sql2="SELECT * FROM fee_additional_fee where class=?"; $query2 = $this->db->query($sql2,$class); foreach ($query2->result_array() as $row2) { $extra_fee_list=$extra_fee_list.' <tr> <td> <input type="checkbox" id="selectedServices" class="checkBoxClass" name="additional_fee_code[]" value="'.$row2['id'].'"> Select</input> </td> <td>'.$row2['cause_addition_fee'].'</td> <td>'.$row2['fee'].'</td> </tr> '; // here again plz take input in arry ----additional_fee_code will work for next method (cal_total_extra_fee()) } echo $extra_fee_list; }

Comme je l'ai réalisé, les data résultat AJAX sont un élément de ligne de table <tr> contient des cellules de données <td> , des entrées <input> ou etc.

Première solution:

Si vous souhaitez accéder à un élément à data intérieur des data , cela devrait faire l'affaire:

 $(':checkbox', $(data));

Ainsi, vous pouvez définir un événement sur les éléments internes juste après data préparation des data .

 // Since jQuery 1.7 $(':checkbox', $(data)).on('click', function() {}); // Or $(':checkbox', $(data)).click(function() {});

Vous pouvez également déclarer une fonction globale et simplement insérer son nom dans la .click() ou .on() tant que gestionnaire.

Alors, modifiez $.ajax section $.ajax semblable à celle ci-dessous:

 $.ajax({ type : "post", url : "show_additional_fee_chkbox_select", data : "send_data_post_for_chkbox="+send_data, success : function(data) { var html = $(data); $('input[type="checkbox"]', html).click(onClickFunction); $("#name_sec").html(html); } });

Voici une démonstration de JSBin

Deuxième solution

Il existe également une autre façon de lier un événement sur les éléments insérés.

L'utilisation de la .find() jQuery .find() pourrait être une option:

 // Since jQuery 1.6 $('#name_sec').find(':checkbox').click(function() { // Do whatever you want });

Cela devrait être placé juste après $("#name_sec").html(data); $.ajax section $.ajax .

Troisième solution:

En utilisant jQuery .on() méthode aussi simple que:

 // Since jQuery 1.7 $('#name_sec').on('click', ':checkbox', function() { // Do whatever you want });

Vous savez que lorsque vous créez de nouveaux objets sur le site, le javascript écrit ne le reconnaîtra pas … Sauf si vous utilisez la méthode en live de jQuery, qui mettra à jour sa connaissance du DOM.

Au lieu de:

 $(my_check_box_class).click(function() {...})

Utilisation:

 $(my_check_box_class).live("click", function() { var id_selecionado = $(this).attr('id'); $.ajax( {...

Je l'ai?