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

Posted 2023-02-19

【中文标题】在由 AJAX 插入的动态创建元素上绑定事件（复选框）

【英文标题】：Bind events on dynamic created elements inserted by AJAX (check box)

【发布时间】：2013-06-11 22:18:01

【问题描述】：

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

【问题讨论】：

我认为你需要这个：api.jquery.com/live 或：api.jquery.com/delegate，因为你使用的是旧版本的 jquery

你能给我看看演示吗？

【参考方案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
);

【参考方案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(
 ...

知道了吗？

【讨论】：

从 jQuery 1.7 开始， live() 已被弃用。使用 on() 代替