locked
Unbind and bind click event in li using jquery RRS feed

  • Question

  • User-633378705 posted

    Hi All,

    I have a <ul> and <li> tags inside a div. In the li some text is there and while clicking on li showing some data based on li's Id. but I have problem while preventing the click event to user. 

    In a button click all li should not allow to click and again by another button it allow to click again to all li. 

    I can disable click event by using jquery off("click")/unbind("click") method, but it is not allowing again for click while using on("click")/bind("click")

    pls help..

    Thanks in advanced .

    Thursday, January 14, 2016 1:03 PM

Answers

  • User-986267747 posted

    Hi Tarun,

    In a button click all li should not allow to click and again by another button it allow to click again to all li. 

    According to your description, i create a sample to meet your requirement, it works fine with Unbind method.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm20.aspx.cs" Inherits="GridViewAppear.WebForm20" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-2.1.4.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
    
                $("#EnableClick").click(function () {
    
                    $('ul.art-vmenu li').bind("click", function (e) {
                        alert($(this).find("span.t").text());
                    }
               )
                })
    
                $("#DisableClick").click(function () {
    
                    $('ul.art-vmenu li').unbind("click");
                })
    
                $('ul.art-vmenu li').bind("click", function (e)
                {
                    alert($(this).find("span.t").text());
                }
                )
    
               
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <input  type="button" value="DisableClick" id="DisableClick"/>
            <input  type="button" value="EnableClick" id="EnableClick"/>
        <div>
            <ul class="art-vmenu">
    
                <li>
                    <a href="#" >
                        <span class="l"></span><span class="r"></span>
                        <span class="t">Home</span>
    
                    </a>
    
                </li>    
                <li>
                    <a href="#" >
                        <span class="l"></span>
                        <span class="r"></span>
                        <span class="t">Create User</span>
                    </a>
    
                </li> 
                <li>
                    <a href="#" class="active">
                        <span class="l"></span>
                        <span class="r"></span>
                        <span class="t">List Users</span>
                    </a>
                </li>  
                <li>
                    <a href="#">
                        <span class="l"></span>
                        <span class="r"></span>
                        <span class="t">Admin</span>
                    </a>
    
                </li>   
        </ul>
        </div>
        </form>
    </body>
    </html>
    

    If you'd like to get more information about Unbind method and bind method, you could refer to the following links.

    http://api.jquery.com/unbind/

    http://www.mkyong.com/jquery/jquery-bind-and-unbind-example/

    I hope it's helpful to you.

    Best Regards,

    Klein zhang

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, January 15, 2016 4:16 AM