jquery 動態新增元素的事件
阿新 • • 發佈:2019-01-26
開發專案時候選擇框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); } }); });
第二種方式就是直接編寫如下方式:
曾經嘗試了$('#SKU').on('change',...)等方式,未果,可能是那裡寫錯了,利用第二種方式解決了,在此記錄,希望對大家有點幫助。$(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); } }); });