Remove From My Forums

Unbind and bind click event in li using jquery

Question
0

Sign in to vote

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

Answered by:

Unbind and bind click event in li using jquery

Question

Answers