页面加载后 select onchange事件可以触发,但是我移除部分标签,重新追加新标签,select onchange事件无法触发,哪里出错了吗?
$(document).ready(function () {
//选择区域
$(".area").on('change', function () {
var node=$(this).parent().parent().find(".floor");
node.empty();
$(node).append('<option value="0">请选择楼盘</option>');
var area = $("option:selected", this).val();
var ids = "";
$("#compare-floor-dl dd").each(function () {
ids += ","+$(this).attr("id");
});
ids=ids.substring(1);
$.post("@Url.Action("ChooseArea")", { area: area,ids:ids }, function (data) {
for (var i = 0; i < data.length; i++) {
$(node).append('<option value="' + data[i].id + '">' + data[i].proname + '</option>')
}
});
});
//选择楼盘
$(".floor").on('change', function () {
$(this).parent().parent().parent().parent().remove();
var id = $("option:selected", this).val();
$.post("@Url.Action("ChooseFloor")", { id: id }, function (data) {
$("#compare-floor-dl").append('<dd id="'+data.id+'"><ul>' +
'<li class="first" style="height: 155px;">' +
' <a href="/NewHouses/Detail/' + data.id + '" target=_blank title="' + data.proname + '"><img src="'+data.img+'" width=120 height=120></a>' +
'</li>' +
'<li><a href="/NewHouses/Detail/'+data.id+'" target=_blank title="' + data.proname + '" class="red">' + data.proname + '</a>'+
'<span class="jclose" onclick="jclose('+data.id+')">[重新选择楼盘]</span></li>' +
'<li>' + data.area + '</li>' +
'<li>'+data.site+'<a href="/NewHouses/Detail/' + data.id + '#dt" target="_blank" class="red">[查看地图]</a></li>' +
'<li>'+data.typemenu+'</li>' +
'<li>'+data.sales_status+'</li>' +
'<li>'+data.pricedesc+'</li>' +
'<li>'+data.property_costs+'</li>' +
'<li>'+data.property_type+'</li>' +
'<li>'+data.decoration+'</li>' +
'<li>'+data.green_rate+'</li>' +
'<li>'+data.kp_time+'</li>' +
'<li>'+data.fin_time+'</li>' +
'<li>'+data.development+'</li>' +
'<li>'+data.sales_address+'</li>' +
'<li><font>'+data.sales_tel+'</font></li>' +
'<li class="hxt">' + data.traffic_flow + '</li>' +
'<li class="hxt">' +
'<span style="padding:5px">' + data.around + '[<a href="/NewHouses/Detail/' + data.id + '" target=_blank>更多</a>]</span>' +
'</li>' +
'</ul></dd>');
});
});
});
//移除并重新追加
function jclose(id) {
$("#" + id + "").remove();
$("#compare-floor-dl").append('<dd id="0"><ul>' +
'<li class="first" style="height: 155px;">' +
'<p><b>添加楼盘</b></p>' +
'<p>' +
'<select class="area">' +
'<option value="">选择区域</option>' +
'<option value="小店区">小店区</option>' +
'<option value="迎泽区">迎泽区</option>' +
'<option value="万柏林区">万柏林区</option>' +
'<option value="尖草坪区">尖草坪区</option>' +
'<option value="晋源区">晋源区</option>' +
'<option value="杏花岭区">杏花岭区</option>' +
'</select>' +
'</p>' +
'<p>' +
'<select class="floor">' +
'<option value="0">请选择楼盘</option>' +
'</select>' +
'</p>' +
'</li>' +
'<li></li>' +
'<li></li>' +
'<li></li>' +
'<li></li>' +
'<li></li>' +
'<li></li>' +
'<li></li>' +
'<li></li>' +
'<li></li>' +
'<li></li>' +
'<li></li>' +
'<li></li>' +
'<li></li>' +
'<li></li>' +
'<li> </li>' +
'<li class="hxt"></li>' +
'<li class="hxt"></li>' +
'</ul></dd>');
}
dom节点改变了,重新追加的标签不会执行之前的方法,将事件在重新追加的后面或者$(document).on('change',''.floor ",function () {}这样写也可以
楼上正解,移除了标签,标签上的事件也没了,添加新标签需要重新绑定时间,或者你不移除标签,清空标签内的内容也行