由AJAX插入动态创建的元素绑定事件（复选框） [英] Bind events on dynamic created elements inserted by AJAX (check box)
问题描述
我是新使用jQuery。我已经写了code，从一个表加起来产品到其他的动态检查像这样 FIDDLE ：此code是工作对我罚款，你可以在小提琴看到
现在我已经通过生成该产品清单（表2）操纵这个code动态使用AJAX，现在这个code不为我工作。
正如我曾想过这个缺陷，那东西，我想，我所有的CSS和JS脚本得到加载页面的的装载但该复选框（表2）抵达动态加载，这就是为什么JS IS NOT有趣的本的....
因此，如何在火灾动态加载输入字段事件函数...只是希望这个脚本得到改善： JQUERY 1.6.4
这是我的看法：
＆LT; DIV CLASS =_ 25＆GT;
＆LT;？PHP的回声form_dropdown（类，$ dropdown_class，''，'ID =CLAS'）; ？＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =_ 25＆GT;
＆LT;？PHP的回声form_dropdown（'节'，$ dropdown_section）; ？＆GT;
＆LT; / DIV＆GT;
＆LT;表类=表的边界=1＆GT;
＆LT; THEAD＆GT;＆LT; TR＆GT;
百分位＆GT;选择＆LT; /第i个
百分位＆GT;原因和LT; /第i个
＆LT;第i个月费＆LT; /第i个
＆LT; / TR＆GT;＆LT; / THEAD＆GT;
＆LT; TBODY ID =selectedServices＆GT;＆LT; / TBODY＆GT;
＆其中; TR＆GT;
＆LT; TD＆GT; Total-＆LT; / TD＆GT;
＆LT; TD＆GT;费用及LT; / TD＆GT;
＆LT; TD ID =总量与GT; 1500＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT;！ - 产品清单（会产生dynmiclly）像tble 2小提琴 - ＆GT;
＆LT;表ID =ABCD级=表的边界=1＆GT;
＆LT; THEAD＆GT;＆LT; TR＆GT;
百分位＆GT;选择＆LT; /第i个
百分位＆GT;原因和LT; /第i个
＆LT;第i个月费＆LT; /第i个
＆LT; / TR＆GT;＆LT; / THEAD＆GT;
＆LT; TBODY ID =name_sec＆GT;
＆LT; - ！在这里您DAT将显示为每个选择类阿贾克斯检查下面的功能和相关的控制器mthod
该值将带着CHK框选择广告prepering数据 - ＆GT;
＆LT; / TBODY＆GT;
＆LT; /表＆gt;
下面是我的脚本：
＆LT; SCRIPT LANGUAGE =JavaScript的＆GT;
jQuery的（功能（$）{
$（＃CLAS）。改变（函数（）{
VAR SEND_DATA = $（＃CLAS）VAL（）。
$阿贾克斯（{
类型：后，
网址：show_additional_fee_chkbox_select
数据：send_data_post_for_chkbox =+ SEND_DATA，
成功：功能（数据）{
$（＃name_sec）的HTML（数据）;
}
}）;
}）;
$（：复选框）改变（函数（）{。
//切换类选择的行的
$（本）.parent（）toggleClass（rowSelected）。
//获取所有的项目名称，合计金额
VAR之和= 1500;
VAR ARR = $（＃ABCD：复选框：选中）图（函数（）{。
总和+ =号（。$（本）。家长（TR）找到（TD：最后的）文本（））;
返回$（本）。家长（TR）的clone（）。
}）。得到（）;
//显示所选项目及其金额
$（＃selectedServices）HTML（ARR）;
$（＃总）文本（总和）。
$（'＃selectedServices：复选框），变化（函数（）{
。$（'＃selectedServices：复选框：未选中）父母（'TR'）删除（）;
}）;
}）;
}）;
＆LT; / SCRIPT＆GT;
我的控制器：
公共职能show_additional_fee_chkbox_select（）
{
$类= $ _ POST ['send_data_post_for_chkbox'];
//这里去乌拉圭回合过程中显示的附加/额外费用清单
$ extra_fee_list ='';
$ SQL2 =SELECT * FROM fee_additional_fee，其中类=？;
$ query2 = $这个 - ＆GT; DB-＆GT;查询（$ SQL2，$类）;
的foreach（$ query2-＆GT; result_array（）为$ ROW2）{
$ extra_fee_list = $ extra_fee_list。
＆其中; TR＆GT;
＆LT; TD＆GT;
＆LT;输入类型=复选框ID =selectedServices级=checkBoxClassNAME =additional_fee_ code []值='。$ ROW2 ['身份证'。'＆GT;选择＆LT; /输入＆GT;
＆LT; / TD＆GT;
＆LT; TD＆GT;'。$ ROW2 ['cause_addition_fee'。'＆LT; / TD＆GT;
＆LT; TD＆GT;[费'。'＆LT $ ROW2。'; / TD＆GT;
＆LT; / TR＆GT; ';
//这里又PLZ需要输入ARRY ---- additional_fee_ code会为下一个方法（cal_total_extra_fee（））
}
回声$ extra_fee_list;
}
因为我意识到，AJAX的结果数据是一个表行元素＆LT ; TR＆GT; 包含数据细胞＆LT; TD＆GT; ，输入＆LT;输入＆GT; 或等。
首个解决方案：
如果你想获得访问一个元素中数据，这应该做的伎俩：
$（：复选框，$（数据））;
所以，你可以之后设置内部元素的事件数据是prepared。
//由于jQuery的1.7
$（：复选框，$（数据））在（'点击'，函数（）{}）;
// 要么
$（：复选框，$（数据））点击（函数（）{}）;。
您还可以声明全局函数，只是插入它的名字 。点击（） 或 。对（） 方法处理。
因此，只需编辑 $。阿贾克斯 类似以下内容：
$。阿贾克斯（{
类型：后，
网址：show_additional_fee_chkbox_select
数据：send_data_post_for_chkbox =+ SEND_DATA，
成功：功能（数据）{
变种的HTML = $（数据）;
$（'输入[类型=复选框]，HTML）。单击（onClickFunction）;
$（＃name_sec）HTML（HTML）;
}
}）;
下面是一个 JSBin演示
第二个解决方案
还有另一种方式来对插入的元素绑定事件
使用jQuery .find（） 方法可能是一个选项：
//由于jQuery的1.6
$（'＃name_sec）找到（：复选框）。点击（函数（）{
// 做你想做的
}）;
中的本应在 $（＃name_sec）HTML（数据）右侧放置/jQuery.ajax/相对=nofollow> 部分。 $。阿贾克斯
第三个解决方案：
通过使用jQuery 。对（） 方法一样简单：
//由于jQuery的1.7
$（'＃name_sec）对（'点击'，'：复选框，函数（）{
// 做你想做的
}）;
I am new with jQuery. I have written a code to add up products from one table to other on checked dynamically like this FIDDLE : this code is working fine for me as you can see in fiddle.
Now I have manipulated this code by generating this product list (of table 2) dynamically using ajax,now this code doesn't work for me..
As I have thought about this defect, the thing that I am thinking that my all CSS and JS scripts get loaded with the loading of page BUT THIS CHECKBOX (TABLE 2) GETTING LOADED DYNAMICALLY THAT IS WHY JS IS NOT ENTERTAINING THIS ....
So how to fire event function on dynamic loaded input field... just want this script to get improved : JQUERY 1.6.4
Here is my view:
<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>
Here is my 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>
And my controller:
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;
}
As I realized, the AJAX result data is a table row element <tr> contains data-cells <td>, inputs <input> or etc.
First Solution:
If you want to get access to an element inside data, this should do the trick:
$(':checkbox', $(data));
So, you can set an event on internal elements right after data is prepared.
// Since jQuery 1.7
$(':checkbox', $(data)).on('click', function() {});
// Or
$(':checkbox', $(data)).click(function() {});
You can also declare a global function and just insert its name to .click() or .on() method as handler.
So, just edit $.ajax section similar to the below:
$.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);
}
});
Here is a JSBin Demo
Second Solution
There is also another way to bind an event on inserted elements.
Using jQuery .find() method could be an option:
// Since jQuery 1.6
$('#name_sec').find(':checkbox').click(function() {
// Do whatever you want
});
This should be placed right after $("#name_sec").html(data); in $.ajax section.
Third Solution:
By using jQuery .on() method as easy as:
// Since jQuery 1.7
$('#name_sec').on('click', ':checkbox', function() {
// Do whatever you want
});
这篇关于由AJAX插入动态创建的元素绑定事件（复选框）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
