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

IT技术 javascript jquery ajax javascript-events

2021-03-11 07:44:21

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

2个回答

正如我所意识到的，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);in$.ajax部分之后。

第三个解决方案：

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

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

您知道当您在站点中创建新对象时，编写的 javascript 将无法识别它...除非...您使用livejQuery的方法，它会自动更新他对 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() 代替

2021-05-20 07:44:21

其它你可能感兴趣的问题

上一篇为什么我不能设置 JavaScript 函数的名称属性？下一篇基本数组构造的函数方法