Adding jquery click event for UpdatePanel

Question

I am using this code for binding asp.net gridview with right click contextmenu using jQuery but every time when I click it (use option in menu list) it reloads the page. What should I do if I want to use an UpdatePanel?

    function fnView() {
        var lnkView = document.getElementById('<%=lnkView.ClientID %>');
        var hiddenField = document.getElementById('<%=fldProductID.ClientID %>');
        hiddenField.value = $("div").filter("[type=ContextMenu]")[0].id.replace("Menu", "");
        lnkView.click();
    }
    function fnDelete() {
        var lnkDelete = document.getElementById('<%=lnkDelete.ClientID %>');
        var hiddenField = document.getElementById('<%=fldProductID.ClientID %>');
        hiddenField.value = $("div").filter("[type=ContextMenu]")[0].id.replace("Menu", "");
        lnkDelete.click();
    }

    jQuery.fn.setEvents = function (e) {
        var me1 = jQuery(this);
        return this.each(function () {
            var me = jQuery(this);
            me.click(function (e) {
                $("div").filter("[type=ContextMenu]").hide();
                fnSetMenu(me.children(':first-child').text(), e.pageX, e.pageY);
            });
        });
    };
    function fnSetMenu(productID, left, top) {
        if ($("#Menu" + productID).html() == null) {
            var strMenuHTML = "<div type=\"ContextMenu\" id=\"Menu" + productID + "\" class=\"contextMenuClass\" mouseonmenu=\"1\"><table style='width:100%;'><tr><td onclick=fnView()>View Product</td></tr><tr><td onclick=fnDelete()>Delete Product</td></tr></table></div>";
            $("body").append(strMenuHTML);
            $.post("MenuHandler.ashx", {}, function (response) {
                $("#Menu" + productID).html(response);
            });
        }
        $("#Menu" + productID).css({ top: top + "px", left: left + "px" }).show();
    }

    $(document).ready(function () {
        $("#gvProducts tr.ShowContext").setEvents();
    }
    );
    $(document).click(function (e) {
        $clicked = $(e.target);
        if (!($clicked.parents().hasClass("ShowContext") || $clicked.hasClass("contextMenuClass") || $clicked.parents().hasClass("contextMenuClass"))) {
            $("div").filter("[type=ContextMenu]").hide();
        }
    });

score 0 · Answer 1 · answered Feb 19 '13 at 11:34

0

use jQuery's live function to bind an event inside updatepanel

or

go through this link

http://stackoverflow.com/questions/256195/jquery-document-ready-and-updatepanels

answered Feb 19 '13 at 11:34

Ankush Jain

1,532
1
15
24

Thank you for your help. But still I am not able to use this live function. It would be grateful if you tell me what changes should I do in above code if I need to use live function. – user2036892 Feb 19 '13 at 12:44

Adding jquery click event for UpdatePanel

1 Answers1