jquery 动态添加元素的事件

开发项目时候选择框DropDownList的Change事件,有时候需要多级级联从而动态生成Select元素,但是此时的Select元素的Change事件无法触发,非常苦闷。  

在项目中采用了两种方式,一种是重新声称元素的时候,把事件写入到partial的view中,但是这种方法运行还是不错,但是在我做另外一个view的时候,始终不行,非常烦躁。尝试了bind live和on的方式都没有很好的解决,最后采用了如下的方式,希望有类似的童鞋能够在此找到答案。  

一种方式在document的$(document).ready(init)中注册如下事件,然后在创建新的元素的时候重新把事件引入进来。

$("select[name='Collection']").change(function () {  
  
            var selectedTypeID = $(this).val();  
            $.ajax({  
                url: '@Url.Content("/Products/GetSkuView")',  
                type: "POST",  
                dataType: "html",  
                data: { Collection: selectedTypeID },  
                success: function (data) {  
                    //$('#DDLSpecies').html(data);  
                    $("#SKU").prop('outerHTML', data);  
                },  
                error: function (XMLHTTPRequest, textStatus, errorThrown) {  
                    $.AlertException(XMLHttpRequest, errorThrown);  
                }  
            });  
        });  

第二种方式就是直接编写如下方式:

$(document).on('change', '#SKU', function () {  
       //alert('hhhhhh');  
       var selectedTypeID = $(this).val();  
       $.ajax({  
           url: '@Url.Content("/Products/GetSpeciesView")',  
           type: "POST",  
           dataType: "html",  
           data: { SKU: selectedTypeID },  
           success: function (data) {  
               //$('#Species').html(data);  
               //alert(data);  
               $("#Species").prop('outerHTML', data);  
           },  
           error: function (XMLHTTPRequest, textStatus, errorThrown) {  
               $.AlertException(XMLHttpRequest, errorThrown);  
           }  
       });  
   });  

曾经尝试了$('#SKU').on('change',...)等方式,未果,可能是那里写错了,利用第二种方式解决了,在此记录,希望对大家有点帮助。

猜你喜欢

转载自my.oschina.net/mickelfeng/blog/1788732