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++;
                }
                });
        });
);

$(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点击事件这样的内容不起作用。任何想法？< / p>

Answer 1

因为它是动态生成的......你需要将事件委托给它

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

Answer 2

那是因为绑定事件时元素不存在。

在AJAX调用的success方法中创建元素后绑定事件。

Javascript：为什么“.deletebutton”的点击事件不会触发

2 个答案: