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-cells 、入力などを含む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のデモがあります

2 番目のソリューション

挿入された要素にイベントをバインドする別の方法もあります。

jQuery.find()メソッドを使用することはオプションかもしれません:

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

$("#name_sec").html(data);これはin$.ajaxセクションの直後に配置する必要があります。

3 番目の解決策:

次のように簡単にjQuery.on()メソッドを使用することにより：

// Since jQuery 1.7
$('#name_sec').on('click', ':checkbox', function() {
    // Do whatever you want
});
于 2013-06-15T21:14:23.077 に答える
-1

サイトで新しいオブジェクトを作成するとき、書かれた JavaScript はそれを認識しないことを知っています... 場合を除き... liveDOM の知識を自己更新する jQuery のメソッドを使用します。

それ以外の：

$(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 に答える