0

这是我的代码： 

$(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点击事件不起作用。有什么想法吗？

4

2 回答 2

3

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

$('body').delegate('a.deletebutton','click',function(e){
            if(!confirm("Do you really want to delete it?")){
                e.preventDefault();
            }
        });
于 2012-07-03T05:34:19.310 回答
1

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

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

于 2012-07-03T05:42:10.223 回答