在AJAX插入的动态创建元素上绑定事件（复选框）
我是jQuery的新手。 我编写了一个代码，用于将产品从一个表添加到其他表上，动态检查就像这个FIDDLE ：这个代码对我来说很好，就像你可以在小提琴中看到的那样。
现在我通过使用ajax动态生成此产品列表（表2）来操纵此代码，现在这段代码对我来说不起作用..
正如我已经考虑过这个缺陷，我认为我的所有CSS和JS脚本都加载了页面加载但是这个CHECKBOX（表2）动态地加载JS为什么JS没有进入这个 ……
那么如何在动态加载的输入字段上触发事件函数…只是希望这个脚本得到改进： JQUERY 1.6.4
这是我的观点：
Select Cause Monthly Charge Total- Fee 1500
Select Cause Monthly Charge
这是我的脚本：
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(); }); }); });
而我的控制器：
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; }
我意识到，AJAX结果data是一个表行元素
包含数据单元
，输入等。
第一解决方案
如果你想访问data的元素，这应该可以解决问题：
$(':checkbox', $(data));
因此，您可以在准备好data后立即在内部元素上设置事件。
// Since jQuery 1.7 $(':checkbox', $(data)).on('click', function() {}); // Or $(':checkbox', $(data)).click(function() {});
您还可以声明一个全局函数，只需将其名称作为处理程序插入.on()或.on()方法。
所以，只需编辑类似下面的$.ajax部分：
$.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); } });
这是一个JSBin演示
二解决方案
还有另一种方法可以在插入的元素上绑定事件。
使用jQuery .find()方法可以是一个选项：
// Since jQuery 1.6 $('#name_sec').find(':checkbox').click(function() { // Do whatever you want });
这应该放在$("#name_sec").html(data); 在$.ajax部分。
第三解决方案
通过使用jQuery .on()方法一样简单：
// Since jQuery 1.7 $('#name_sec').on('click', ':checkbox', function() { // Do whatever you want });
您知道当您在站点中创建新对象时，编写的javascript将无法识别它…除非……您使用jQuery的live方法，它将自行更新他对DOM的了解。
代替：
$(my_check_box_class).click(function() {...})
使用：
$(my_check_box_class).live("click", function() { var id_selecionado = $(this).attr('id'); $.ajax( {...
得到它了？