Jquery disabled an event, and re activate it later

Question

1 - I've gat an html tag with data-needlogged attribute.

2 - I would like to disable all click events on it.

3 - When the user click on my element, I want to display the authentification popin.

4 - When the user will be logged, I would like to launch the event than I disabled before.

I try something like the following code but it miss the "...?" part.

<a href="/play" data-btnplay data-needlogged="true">Play</a>

<script>
// 1 - some click events has been plug on the tag.
jQuery('[data-btnplay]').on('click', function() {
    alert('play');
    return false;
});

// 2 - disabled all click events
jQuery('[data-needlogged]').off('click');

// 3 - Add the click event to display the identification popin   
var previousElementClicked = false;
jQuery('body').on('click.needlogged', '[data-needlogged]="true"', function() {
    previousElementClicked = jQuery(this);
    alert('show the identification popin');
    return false;
});

jQuery(document).on('loginSuccess', function() {
    // 4 - on loginSuccess, I need to remove the "the show the identification popin" event. So, set the  data-needlogged to false
    jQuery('[data-needlogged]')
        .data('needlogged', 'false')
        .attr('data-needlogged', 'false');

    // 4 - enable the the initial clicks event than we disabled before (see point 2) and execute then.
    // ...?
    jQuery('[data-needlogged]').on('click'); // It doesn't work

    if (previousElementClicked) {
        previousElementClicked.get(0).click();
    }
});
</script>

Thanks for your help

Answer 1

Thank for your answer.

It doesn't answer to my problem.

I will try to explain better.

When I declare the click event on needlogged element, I don't know if there is already others click event on it. So, in your example how you replace the alert('play'); by the initial event ?

I need to find a way to

1 - disable all click events on an element.

2 - add a click event on the same element

3 - and when a trigger is launch, execute the events than I disabled before.

So, I found the solution on this stackoverflow

In my case, I don't realy need to disable and enable some event but I need to set a click event before the other.

<a href="/play" data-btnplay data-needlogged="true">Play</a>

<script>
// 1 - some click events has been plug on the tag.
jQuery('[data-btnplay]').on('click', function() {
    alert('play');
    return false;
});

// [name] is the name of the event "click", "mouseover", .. 
// same as you'd pass it to bind()
// [fn] is the handler function
jQuery.fn.bindFirst = function(name, fn) {
    // bind as you normally would
    // don't want to miss out on any jQuery magic
    this.on(name, fn);

    // Thanks to a comment by @Martin, adding support for
    // namespaced events too.
    this.each(function() {
        var handlers = $._data(this, 'events')[name.split('.')[0]];
        // take out the handler we just inserted from the end
        var handler = handlers.pop();
        // move it at the beginning
        handlers.splice(0, 0, handler);
    });
};

var previousElementClicked = false;

// set the needlogged as first click event
jQuery('[data-needlogged]').bindFirst('click', function(event) {
    //if the user is logged, execute the other click event
    if (userIsConnected()) {
        return true;
    }

    //save the click element into a variable to execute it after login success
    previousElementClicked = jQuery(this);

    //show sreenset
    jQuery(document).trigger('show-identification-popin');

    //stop all other event
    event.stopImmediatePropagation();
    return false;
});

jQuery(document).on('loginSuccess', function() {
    if (userIsConnected() && lastClickedElement && lastClickedElement.get(0)) {
        // if the user has connected with success, execute the click on the element who has been save before
        lastClickedElement.get(0).click();
    }
});