Eventos de vinculación en elementos dynamics creados por AJAX (checkbox)

Soy nuevo con jQuery. He escrito un código para sumr dinámicamente productos de una tabla a otra como esta FIDDLE : este código funciona bien para mí, como se puede ver en el violín.

Ahora que he manipulado este código generando esta lista de productos (de la tabla 2) dinámicamente usando ajax, ahora este código no funciona para mí.

Como he pensado en este defecto, lo que estoy pensando es que mis scripts CSS y JS se cargan con la carga de la página PERO ESTE CHECKBOX (TABLA 2) SE CARGA DINÁMICAMENTE ES POR ESO QUE JS NO ESTÁ ENTRETENANDO ESTO ….

Entonces, ¿cómo disparar la función de evento en el campo de entrada cargado dinámicamente … solo quiero que esta secuencia de comandos mejore: JQUERY 1.6.4

Aquí está mi vista:

 
Select Cause Monthly Charge
Total- Fee 1500
Select Cause Monthly Charge

Aquí está mi script:

  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(); }); }); });  

Y mi controlador:

 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.'    Select  '.$row2['cause_addition_fee'].' '.$row2['fee'].'  '; // here again plz take input in arry ----additional_fee_code will work for next method (cal_total_extra_fee()) } echo $extra_fee_list; } 

Como me di cuenta, los data resultados de AJAX son un elemento de fila de la tabla

contiene celdas de datos

, entradas etc.

Primera solución:

Si desea obtener acceso a un elemento dentro de los data , esto debería ser el truco:

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

Por lo tanto, puede establecer un evento en los elementos internos justo después de data se preparen los data .

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

También puede declarar una función global e insertar su nombre en el .click() o .on() como manejador.

Entonces, solo edite la sección $.ajax similar a la siguiente:

 $.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); } }); 

Aquí hay una demostración de JSBin


Segunda solución

También hay otra forma de vincular un evento en elementos insertados.

Usar el .find() jQuery .find() podría ser una opción:

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

Esto debe colocarse justo después de $("#name_sec").html(data); en la sección $.ajax .


Tercera solución:

Al utilizar jQuery .on() método tan fácil como:

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

Sabes que cuando creas objetos nuevos en el sitio, el javascript que se escribe no lo reconoce … A menos que … uses el método live de jQuery, que actualizará automáticamente su conocimiento del DOM.

En lugar de:

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

Utilizar:

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

¿Lo tengo?