3

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

2 回答 2

5

正如我所意识到的，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
});
于 2013-06-15T21:14:23.077 回答
-1

你知道，当你在站点中创建新对象时，编写的 javascript 将无法识别它……除非……你使用livejQuery 的方法，它会自动更新他对 DOM 的知识。

代替：

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

采用：

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

知道了？

于 2013-06-15T21:26:48.407 回答