CODEWITHSUNDEEP
javascriptjqueryhtml
Alex Man
Alex Man

Reputation: 4886

on click event not working

I have one in which I will be having multiple child components, at first if I click at any component, the corresponding click event should be triggered and after that no other component click event within that div should not trigger unless otherwise the mouse moves out of the borderline and again comes back in.

I have done the following stuff to achieve this, right now the first part is complete that is when we click at any component the corresponding click event will be triggered and after that no other component click event within that div will occur since I am removing the click event using .off("click");

but now the issue is that when the mouse leaves the div, I want to reattach the click event which is not happening when i used the following code, 

$('.parent *').on('mouseleave', function () {
    $(".parent *").on('click')
});

Can anyone please tell me some solution for this

JSFiddle

Upvotes: 0

Views: 190

Answers (4)

Pushpak
Pushpak

Reputation: 148

You need to bind the click event to a particular function so that on click it can fire that function.

$('.parent *').on('mouseleave', function () {
  $(".parent *").off('click').on("click",functionName);
});

That's all to bind the click again. hope this may help you. Thanks!!

Upvotes: 0

syms
syms

Reputation: 411

$(document).ready(function () {
    function clickEvents(){
        $("#myButton").off().on('click',function () {
            console.log('myButton clicked....');
        });

        $("#myHyperLink").off().on('click',function () {
            console.log('myHyperLink clicked....');
        });
    }

    $('.parent').on('mouseleave', function () {
       clickEvents()
    });

    $(".parent").click(function (event) {
        $(".parent *").off("click");
    });
 clickEvents()

});

You also can try this.

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388436

You can't just add a removed handler by calling on('click'), you need to pass the event handlers.

One possible solution is to know whether the parent is already clicked, then don't do anything, for which you can use a class like

$(document).ready(function () {

    $("#myButton").click(function () {
        if (isParentClicked(this)) {
            return;
        }
        console.log('myButton clicked....');
    });

    $("#myHyperLink").click(function () {
        if (isParentClicked(this)) {
            return;
        }
        console.log('myHyperLink clicked....');
    });

    function isParentClicked(el) {
        return $(el).closest('.parent').hasClass('clicked');
    }

    $('.parent').on('mouseleave', function () {
        $(this).removeClass('clicked')
    });

    $(".parent").click(function (event) {
        $(this).addClass('clicked')
    });

});

Demo: Fiddle

Another possible solution is 

$(document).ready(function() {
  $('.clickable').click(function(event) {
    if ($(this).closest('.parent').hasClass('clicked')) {
      event.stopImmediatePropagation();
    }
  })

  $("#myButton").click(function() {
    console.log('myButton clicked....');
  });

  $("#myHyperLink").click(function() {
    console.log('myHyperLink clicked....');
  });

  $('.parent').on('mouseleave', function() {
    $(this).removeClass('clicked')
  });

  $(".parent").click(function(event) {
    $(this).addClass('clicked')
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='parent' style="width:100px;border:2px solid blue">
  <button id="myButton" class="clickable">Click Me</button>
  <a href="#" id="myHyperLink" class="clickable">Click Me Too</a>
</div>

Demo: Fiddle

Upvotes: 1

Tushar
Tushar

Reputation: 87233

You have to provide event handler for click event:

$(".parent *").on('click', function () {
    console.log('Event occured');
    // Your event handler function call here
});

Upvotes: 3

Related Questions