Javascript：為什么“ .deletebutton”的點擊事件未觸發

Question

這是我的代碼：

 $(document).ready(function(){ //These variables are for loading more posts var create_ptr = 1 var participate_ptr = 1 var approve_ptr = 1 var identical_flag = "{{ identical_flag }}" //These are confirmatory dialogues $('a.deletebutton').click(function(e){ if(!confirm("Do you really want to delete it?")){ e.preventDefault(); } }); $('.cancel').click(function(e){ if(!confirm("Do you really want to cancel it?")){ e.preventDefault(); } }); //Ajax Loading of more posts //Ajax Loading of created wars $('#load_created').click(function(){ $.ajax({ url:"/wars/loadcreated/", type:'POST', dataType: 'json', data: { poi: create_ptr, user: {{ user_req.id }}, csrfmiddlewaretoken: '{{ csrf_token }}', }, success: function(response){ //alert(response); label = "div"+create_ptr; var map = response; $.each(map,function(k,v){ //alert(k+":"+v); if(identical_flag=="True"){ text = "<div> \\ <div class='grid_16 omega title'> \\ <a href=/wars/"+k+" class='war'>"+v['title']+"</a> \\ </div> \\ <div class='grid_3 configure'> \\ <a href=/wars/configure/"+k+" class='configure'>Configure</a> \\ </div> \\ <div class='grid_3 alpha omega delete'> \\ <a href=/wars/"+v['user']+"/"+k+"/delete class='deletebutton'>Delete</a> \\ </div> \\ </div>"; }else{ text = "<div class='grid_22 title'> \\ <a href=/wars/"+k+" class='war'>"+v['title']+"</a> \\ </div>"; } $('div#created div#wars').append(text); $('div#created div#wars').append('<div class="clear"></div>'); $('div#created div#wars').append('<hr>'); $('div#created div#wars').append('<div class="clear"></div>'); }); create_ptr++; } }); }); ); 

但是，當我按下“ a.deletebutton”時，沒有確認對話框出現。它只是繼續並從數據庫中刪除我的數據。似乎“ a.deletebutton”的javascript click事件不起作用。任何想法嗎？

Answer 1

因為它是動態生成的..您需要將事件委托給它

$('body').delegate('a.deletebutton','click',function(e){
            if(!confirm("Do you really want to delete it?")){
                e.preventDefault();
            }
        });

Answer 2

這是因為綁定事件時元素不存在。

在AJAX調用的成功方法內創建元素之后，綁定事件。