jquery bind unbind

Question

Hi I have a site where dynamically load page inside the conatiner. I have a menu of navigation like this:

<div class="menu">
    <p align="left" id="home" class="titolo_menu">home</p>
    <p align="left" id="azienda" class="titolo_menu azienda"><br>azienda</p>
    <p align="left" id="staff" class="titolo_sotto_menu azienda">staff</p>
    <p align="left" id="risorseumane" class="titolo_sotto_menu azienda">risorse umane</p>
</div>

And into my jQuery I have added this line:

$(document).ready(function(){
    $('.titolo_menu').bind('click',function(){
            $('.titolo_menu').unbind('click');
             //more code...
     });
  });

I want when a user click on a p with class "titolo_menu" disable the event click but doesn't work, I can click more and more time. How can I solve it?

align attribute is deprecated, use <ul> + <li> inside a <nav> element for navigation, and use <a>'s for links. Then reproduce your problem on a fiddle so it's easier to help you ^^ — moonwave99
– moonwave99, Commented Oct 31, 2012 at 15:07
@undefined because after I have to enable again the click event — Alessandro Minoccheri
– Alessandro Minoccheri, Commented Oct 31, 2012 at 15:09
As of jQuery 1.7, bind/unbind is deprecated in favor of the on/off methods. — Christofer Eliasson
– Christofer Eliasson, Commented Oct 31, 2012 at 15:09

moonwave99 · Accepted Answer · 2012-10-31 15:34:37Z

2

Though I couldn't figure out what you really want in your application, consider using data-* attributes to same some state inside DOM itself, like:

$(document).ready(function(){
    $('.titolo_menu').on('click',function(){

        // let's create a reference for current element
        $p = $(this);

        // if clicked element had data-disabled attribute set, return
        if($p.data('disabled'))
            return;

        // disable element;
        $p.data('disabled', true);

        // do your stuff here, e.g.
        $.get('dapage.html', function(data){

            // do your stuff on data retrieving
            $(something).html(data);

            // re-enable element
            $p.data('disabled', false);

        });

   });
});

This way you can have control over events, without messing with unbinding.

answered Oct 31, 2012 at 15:34

moonwave99

22.9k3 gold badges49 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alessandro Minoccheri Over a year ago

This work I have data attributes and now I can disable and enable easily my DOM elements

coolguy · Accepted Answer · 2012-10-31 15:06:00Z

0

You can try this....

$(document).ready(function(){
var return_flag = true;
    $('.titolo_menu').bind('click',function(){
        if(return_flag){
             //more code...
        }
    return_flag = false;
     });
  });

answered Oct 31, 2012 at 15:06

coolguy

7,9549 gold badges48 silver badges72 bronze badges

Comments

arbor · Accepted Answer · 2012-10-31 15:36:11Z

0

Just change class name

$('.titolo_menu').bind('click',function(){
           $(this).removeClass('.titolo_menu');
             //more code...
     });

Or if you want to disable all elements:

$('.titolo_menu').bind('click',function(){
            $('.titolo_menu').removeClass('.titolo_menu');
             //more code...
     });

Doesn't work if you use 'live' insted of 'bind'

//Edit Sorry it won't work. Just use live:

$('.titolo_menu').live('click', function(){
  $('.titolo_menu').removeClass('.titolo_menu');
});

But if you just want to prevent multiple click whie page is loading just use

.attr('disabled', 'disabled');

edited Oct 31, 2012 at 15:36

answered Oct 31, 2012 at 15:13

arbor

111 bronze badge

1 Comment

user400654 Over a year ago

It's actually quite the opposite, it will only work IF you use .live instead of .bind.

Jimmy C. · Accepted Answer · 2012-10-31 15:51:41Z

0

Firstly I'd like to advice you to use an unsorted list when creating menu's and use <a> tags to link the pages.

Example:

<ul id="menu">
    <li id="home" class="titolo_menu"><a href="#home">home</a></li>
    <li id="azienda" class="titolo_menu azienda"><a href="#azienda">azienda</a></li>
    <li id="staff" class="titolo_sotto_menu azienda"><a href="#staff">staff</a></li>
    <li id="risorseumane" class="titolo_sotto_menu azienda"><a href="#risorseumane">risorse umane</a></li>
</ul>

In jQuery you could then do something like this:

$(function() {

    $("#menu a").click(function(e) {
        var clickedElement = $(this);
        var clickedElementText = clickedElement.text();

        // Check if current link is not yet active
        if (!$(clickedElement).hasClass("active")) {

            if ($(".active").length > 0) {
                // Deactivate current active link
                var active = $(".active ");
                var activeText = $(active).text();

                $(".active").replaceWith("<a href = '#" + active.parent().attr("id") + "' > " + activeText + " </a>");
            }
            // Change the clicked link to be activated
            $(clickedElement).replaceWith("<span class='active'>" + clickedElementText + "</span>");

            // Load your page or whatever here :)

            // Prevent normal link behavior
            e.preventDefault();
        }
    });
});

answered Oct 31, 2012 at 15:51

Jimmy C.

892 silver badges8 bronze badges

5 Comments

Alessandro Minoccheri Over a year ago

I can't use tag a because I have to do particular thing and a link isn't the right solution, I know well html and I know that is better but not in this case sorry

Jimmy C. Over a year ago

Could you explain why it isn't a correct solution. My solution should work if you change them to <p> tags.

Alessandro Minoccheri Over a year ago

because I want that when a use go over doens't go lo a link there a re case where isn't clickable like if you are in the same page doesn't have to refresh the page and is more comfortable to use p instead f tag a

Jimmy C. Over a year ago

Still not entirely sure what you're trying to achieve. Either way, I hope someone is able to answer your question.

Alessandro Minoccheri Over a year ago

already answer, is a very complex layout and logic is the best way for many reason believe me

Collectives™ on Stack Overflow

jquery bind unbind

4 Answers 4

1 Comment

Comments

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related