javascript-绑定由AJAX插入的动态创建的元素上的事件(复选框)

我是jQuery的新手.我编写了一个代码,将一个表上的产品与另一个表上的产品进行动态加总,就像FIDDLE一样：正如您在小提琴中看到的那样,此代码对我来说很好用.

现在,我已经使用Ajax通过动态生成此产品列表(表2)来操纵了此代码,现在该代码对我不起作用.

当我考虑到此缺陷时,我想到的是我所有的CSS和JS脚本都加载了该页面的复选框,但此复选框(表2)却动态地加载了,这就是为什么JS不能理解这一点.

因此,如何在动态加载的输入字段上触发事件函数…只希望此脚本得到改进：JQUERY 1.6.4

这是我的看法：

<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>

这是我的脚本：

<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>

而我的控制器：

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

解决方法:

如我所知,AJAX结果数据是表行元素< tr>.包含数据单元< td&gt ;,输入< input>.或其他

第一个解决方案：

如果您想访问数据中的元素,则应该这样做：

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

因此,您可以在准备好数据后立即在内部元素上设置事件.

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

// Or
$(':checkBox', $(data)).click(function() {});

您还可以声明一个全局函数,只需将其名称插入到.click()或.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 Demo

第二解决方案

还有另一种在插入的元素上绑定事件的方法.

可以使用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
});