绑定由AJAX插入的动态创建的元素上的事件（复选框）

Question

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

Answer 1

如我所知，AJAX结果data是一个表行元素，<tr>其中包含数据单元格<td>，输入<input>等。

如果您想访问里面的元素data，这应该可以解决问题：

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

因此，您可以在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演示

第二解决方案

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

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