jquery的append()离奇有关问题

2013-02-24

jquery的append()离奇问题通過APPEND生成的DIV触发不了CLICK时间，但是直接人手写在页面上的DIV却可以。请问

jquery的append()离奇问题
通過APPEND生成的DIV触发不了CLICK时间，但是直接人手写在页面上的DIV却可以。请问有人知道是怎么回事吗？


<div id="div_room_container" class="lease_room_container">
    <div id="handle_by_Manual" class="room">azaz</div> //人手写在页面上，能触发click
    <div id="A101" class="room">A101</div> //通過ajax生成,无法触发click事件
    <div id="A102" class="room">A102</div> //通過ajax生成,无法触发click事件
    <div id="A103" class="room">A103</div> //通過ajax生成,无法触发click事件
    <div id="A104" class="room">A104</div> //通過ajax生成,无法触发click事件
</div>


$(document).ready(function () {
            $(".room").click(function () {
                alert('OK');
                //alert($(this).html());
            });

            $.ajax({
                type: 'get',
                url: "Ajax_Service/LeaseService.aspx",
                data: 'request_type=getrooms&' + 'roomid=' + '' + '&district=' + 'A' + '&action=' + 'D',
                //data: { roomid: 'aaa', district: 'A', action: 'D' },
                success: function (data) {
                    //$('#div_room_container').empty();
                    var myarray = $.parseJSON(data);
                    $.each(myarray, function (i, item) {
                        $('#div_room_container').append(
                            "<div class='room' id='" + item.roomid + "'>" + item.room_cname + "</div>"
                        );
                    })
                },
                error: function () { alert('ajax failed'); }
            });

});

[解决办法]
为后加的html元素绑定事件需要用on

$("").on("click",function(){alert("ok");});
[解决办法]

引用:

又GOOGLE了一遍，似乎是由於新增元素绑定事件的问题，改成用LIVE绑事件，但是依然无效
JavaScript code?1234$(".room").die().live("click", function () { alert('OK'); //alert($(this).html());});
……

绑定事件的次序有点小问题，先append然后绑定事件
success: function (data) {
                    //$('#div_room_container').empty();
                    var myarray = $.parseJSON(data);
                    $.each(myarray, function (i, item) {
                        $('#div_room_container').append(
                            "<div class='room' id='" + item.roomid + "'>" + item.room_cname + "</div>"
                        );
                     $(".room").click(function () {//事件绑定放到这里，原因是没有新append的没有绑定事件
                alert('OK');
                //alert($(this).html());
            });

})
[解决办法]

引用:

按照datiexiong的改法OK了。但是有個疑問為甚麼這個綁定事件一定要卸載AJAX的囘調函數裏面？我寫在AJAX FUNCTION外面卻不行？

因为ajax是异步执行的，js不会等到你ajax语句执行完成再执行下一步语句
[解决办法]

引用:

对于动态生成的元素，要用live来绑定事件，或者delegate
JavaScript code?12345$(".room").live('click',function () { alert('OK'); //alert($(this).html()); });

对的，这楼说的很对，动态生成元素不能直接绑定click ,要用live 或者 delegate

热点排行