首页 新闻 会员 周边 捐助

关于js select onchange事件无法触发的问题

0
悬赏园豆:10 [已解决问题] 解决于 2018-11-21 08:51

页面加载后 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>');
}

恶之必要的主页 恶之必要 | 初学一级 | 园豆:165
提问于:2018-11-20 17:27
< >
分享
最佳答案
2

dom节点改变了,重新追加的标签不会执行之前的方法,将事件在重新追加的后面或者$(document).on('change',''.floor ",function () {}这样写也可以

收获园豆:10
地火水 | 小虾三级 |园豆:1290 | 2018-11-20 17:39
其他回答(1)
0

楼上正解,移除了标签,标签上的事件也没了,添加新标签需要重新绑定时间,或者你不移除标签,清空标签内的内容也行

rqx | 园豆:468 (菜鸟二级) | 2018-11-20 18:52
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册