开发项目时候选择框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',...)等方式,未果,可能是那里写错了,利用第二种方式解决了,在此记录,希望对大家有点帮助。