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

Answers:

Answer
$(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.

Answer

You have to provide event handler for click event:

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

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

Answer

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!!

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.