Question

在我的视图页面上，我使用Ajax和JQuery从Codeigniter的控制器获取数据，然后以html格式将其返回到查看页面。

以下是Ajax帖子的代码

$(document).ready(function(){
        var fileId = 0;
        var wrapper = $("#preference");
        var add_button = $("#btn_Add");
        var x = 0;

     $(add_button).click(function(e){
        e.preventDefault();
        x++;
        $.post('<?php echo base_url();?>'+'index.php/client/ajax_cat',{}, function(returned){
            $('#preference').append(returned);
        });
     });

     $(wrapper).on("click","#btnRemove", function(e){
        e.preventDefault();
        $(this).closest(".tr").remove(); 
        x--;

     });

      $('.selCat').change(function(){
        alert('changed');

      });

这是控制器内部的代码：

public function ajax_cat(){

        $result = $this->preference->getSubCategory2();

        $subcats = array();

        $subcats['0'] = '-Select a category-';

        foreach ($result as $row) {
            # code...
            $key = $row->cat2code;
            $value = $row->cat2name_EN;
            //echo $key;
            $subcats[$key] = $value;
        }

        $form_dropdown = form_dropdown('selCat', $subcats,'0', 'class="selCat"');

        $output = '<div class="tr">' 
            .   '<div class="td">Category :</div>'
            .   '<div class="td">'
            .   $form_dropdown
            .   '</div>'
            .   '<div class="td">Sub Category :</div>'
            .   '<div class="td">'
            .       '<select class="selSubCat">'
            .           '<option value="0" selected="true">-Select a category first-</option>'
            .       '</select>'
            .   '</div>'
            .   '<div class="td">Score :</div>'
            .   '<div class="td"><input type="text" size="1" />&nbsp;&nbsp;<a href="#" id="btnRemove">Remove&nbsp;[-]</a></div>'
            .   '</div>';

            echo $output;

    }

我想要做的是当更改下拉列表“selCat”时，我将执行另一个Ajax帖子以获取与该特定下拉列表的先前选择相对应的数据。

如果我的下拉列表是动态的，我如何处理特定下拉列表的事件更改？

我尝试用

$('.selCat').change(function(){
        alert('changed');

      });

Answer 1

我认为问题在于DOM加载和初始化。

尝试在追加后直接添加change()位：

$(document).ready(function(){
        var fileId = 0;
        var wrapper = $("#preference");
        var add_button = $("#btn_Add");
        var x = 0;

     $(add_button).click(function(e){
        e.preventDefault();
        x++;
        $.post('<?php echo base_url();?>'+'index.php/client/ajax_cat',{}, function(returned){
            $('#preference').append(returned);

            //NEW BIT!
            $('.selCat').change(function(){
               alert('changed');
            });
            //end new bit
        });
     });

     $(wrapper).on("click","#btnRemove", function(e){
        e.preventDefault();
        $(this).closest(".tr").remove(); 
        x--;

     });

JQuery：如何处理多个元素的事件

1 个答案: