第一个解决方案：

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 Demo

第二个解决方案

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

使用jQuery .find()方法可以是一个选项：

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

这应该放在$.ajax部分的$("#name_sec").html(data);之后。

第三种解决方案：

使用jQuery .on()方法一样简单：

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

Answer 2

你知道当你在网站上创建新对象时，所写的javascript将无法识别它......除非......你使用jQuery的live方法，它将自我更新他的知识DOM。

而不是：

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

使用：

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

知道了吗？

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

2 个答案:

第一个解决方案：

第二个解决方案

第三种解决方案：