jQuery在右键单击时删除动态生成的li

时间:2012-11-09 04:47:02

标签: jquery

我有一个网站,需要通过添加&删除。我正在使用jQuery的mousedown和contextMenu让我走到这一步;但是我不能删除/删除li。删除li后,我需要更新数据库。生成的ul / li如下所示:

<div id="ctl00_updt_pnl">
    <ul id="ctl00_ul_0_button">
        <li id="ctl00_li_0_button"><a href="#" id="ctl00_a_0">myFavorites<!--[if gt IE 6]><!--></a><!--<![endif]--><!--[if lt IE 7]><table border="0" cellpadding="0" cellspacing="0"><tr><td><![endif]-->
            <ul id="ctl00_ul_1_button">
                <li id="ctl00_li_1_button_1" class="right">
                    <div id="ctl00_Panel_1" style="width:300px;"><input type="submit" name="ctl00$add_myFavorites" value="Add to myFavorites..." id="ctl00_add_myFavorites" class="right" style="color:Black;font-size:9pt;font-weight:bold;width:130px;float:left;" />&nbsp&nbsp&nbsp&nbsp<img title="Click to View How to use" class="right_openmenu" src="Scripts/jQuery_ContextMenu/images/lightning.png" alt="How to use Menu" style="border-width:0px;margin:0 25px 0 0;" />
                    </div>
                </li>

                <div>
                    <li class="right_li" id="li_49"><a class="right_li_href" href="">&nbsp;test 11-28 #18</a></li>
                    <li class="right_li" id="li_50"><a class="right_li_href" href="">&nbsp;test 11-28 #19</a></li>
                    <li class="right_li" id="li_51"><a class="right_li_href" href="">&nbsp;test 11-28 #20</a></li>
                    <li class="right_li" id="li_52"><a class="right_li_href" href="">&nbsp;test 11-28 #21</a></li>
                </div>
            </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
    </ul>
    <div id="ctl00_Panel_2" class="div_hf_favorite_name_css">
        <input type="submit" name="ctl00$ButtonHiddenDeleteFavorite" value="ButtonHiddenDeleteFavorite" id="ctl00_ButtonHiddenDeleteFavorite" class="css_deleteFavorite" style="display:none;" /><input type="hidden" name="ctl00$id_hf_favorite_name" id="ctl00_id_hf_favorite_name" value="0" />
    </div>
    <div id="ctl00_Panel_3" class="div_hf_li_to_be_deleted_css">
        <input type="hidden" name="ctl00$id_hf_li_to_be_deleted" id="ctl00_id_hf_li_to_be_deleted" />
    </div>
</div>

我的jQuery代码如下:

$(document).ready(function() {
        // Was the  right-mousedown clicked?
            $(".right_li").mousedown(function(event) {
        // if (event.which == 3) {
        // $("#spanMouseButton").text('Right Button Clicked');
        //              }
            }); 
 //
 $(".right_li").contextMenu({ menu: 'my_favorites_Delete_Menu' }, function(action, el, pos) { contextMenuWork(action, el, pos); });
//
        function contextMenuWork(action, el, pos) {
                switch (action) {
                    case "delete":
                        {
            var msg = "Delete your favorite by the name you saved as: " + $(el).find(".right_li_href").text() + "?";                                
            var msg2 = $(el).find(".right_li_href").text();
        var li = $(this);
            li.remove();                            
        confirm(msg);
    // save the href in a hiddenfield for pass back to the codebehind (Ajax)
        $('.div_hf_favorite_name_css input[type=hidden]').val(msg2);                                
            break;
                        }                           
                    case "how_to":
                        {
                    $("#ShowInstructions").modal({
                                close: true,
                                onOpen: modalOpenShowInstructions,
                                onClose: modalOnClose,
                                persist: true,
                    containerCss: ({ width: "600px", height: "100%", marginLeft: "-300px", marginTop: "-100px", overflow: "auto" })
                            });
                            break;
                        }                       
                }
            }
 //
            function contextHowto() {               
                $("#ShowInstructions").modal({
                    close: true,
                    onOpen: modalOpenShowInstructions,
                    onClose: modalOnClose,
                    persist: true,
                    containerCss: ({ width: "600px", height: "100%", marginLeft: "-300px", marginTop: "-100px", overflow: "auto" })
                });
            }
//
            function confirm(message) {
                $("#confirm").modal({
                    close: true,
                    overlayId: 'confirmModalOverlay',
                    containerId: 'confirmModalContainer',
                    onClose: modalOnClose,
                    onShow: function modalShow(dialog) {
                        dialog.overlay.fadeIn('slow', function() {
                            dialog.container.fadeIn('fast', function() {
                                dialog.data.hide().slideDown('slow');
                            });
                        });
                        dialog.data.find(".confirmmessage").append(message);
                        // Yes button clicked
                        dialog.data.find("#ButtonYes").click(function(ev) {
                            ev.preventDefault();
                            $.modal.close();        
 //         remove the li on the confirmation of the delete
                            var li = $(this);
                        li.remove();
 //             don't postback for now
                            false;

 // Here's where to go in the code-behind on the postback                                        //$("[id*=ButtonHiddenDeleteFavorite]").click();
//
                        });
                    }
                });
            }
 //
            function modalOpenAddCustomer(dialog) {
                dialog.overlay.fadeIn('fast', function() {
                    dialog.container.fadeIn('fast', function() {
                        dialog.data.hide().slideDown('slow');
                    });
                });
                dialog.data.find(".modalheader span").html("Add New Customer");                     
            }
 //                 
            function modalOpenShowInstructions(dialog) {
                dialog.overlay.fadeIn('fast', function() {
                    dialog.container.fadeIn('fast', function() {
                        dialog.data.hide().slideDown('slow');
                    });
                });
                dialog.data.find(".modalheader span").html("How to use the Favorites");
                // if the user clicks "yes"
                dialog.data.find("#Show_Instructions").click(function(ev) {
                    ev.preventDefault();
                    //Perfom validation
                    if (Page_ClientValidate("addCustomer")) {
                        $.modal.close();
                        $("#ButtonHiddenAddCustomer").click();
                    };
                });
            }
  //                
                    function modalOnClose(dialog) {
                dialog.data.fadeOut('slow', function() {
                    dialog.container.slideUp('slow', function() {
                        dialog.overlay.fadeOut('slow', function() {
                $.modal.close(); // must call this to have SimpleModal                   

        // re-insert the data correctly and
        // clean up the dialog elements                         
 //
                        });
                    });
                });
            };
        });
       }

1 个答案:

答案 0 :(得分:0)

如果您需要将事件绑定到将动态创建的li,请使用.on()处理程序

$(document).ready(function() {

    $('body').on('mousedown', '.right_li', function(event) {
        if (event.which == 3) {
            $(this).remove();
            // Your Code Here
        }
    });

});