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呼び出しのsuccessメソッド内に要素を作成した後、イベントをバインドします。

于 2012-07-03T05:42:10.223 に答える