Question

Here is my code:

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

But when I press the “a.deletebutton”,no confirmatory dialogue shows up.It simply goes on and delete my data from database.Seems like javascript click event of “a.deletebutton” is not working.Any Idea?

Answer 1

Because its dynamically generated..you need to delegate the event to it

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