Jquery detect event on click only

jquery ::after click event
jquery trigger click
jquery onclick call function
jquery ::before click event
jquery on click
jquery click not working
jquery form events
jquery button

I want to add some code after a jQuery event has occurred on a form after a click event only. The event is also called when other events occur.

If I use this code it detects the event being called:

      $( ".grouped_form" ).on("wc_variation_form", function() {

The best solution i've been able to come up with is this, but it doesn't work:

$( ".grouped_form" ).on("click", function() {
      $(this).on("wc_variation_form", function() {

Is there a way to detect when this event is triggered by a click event only?


    // Your codes
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Click thi button before trigger. otherwise you can not get a result.</div>
<button class="click">Click</button>
<div>Click this button for trigger the event</div>
<button class="trigger">Trigger</button>

.one(), A string containing one or more JavaScript event types, such as "click" or "submit,​" or custom event names. data alert( "This will be displayed only once." ); });  $ ("p").click(function() { alert ("The paragraph was clicked."); Try it Yourself » Definition and Usage. The click event occurs when an element is clicked. The click () method triggers the click event, or attaches a function to run when a click event occurs. Trigger the click event for the selected elements: $ ( selector ).click () Try it.

Try next modiffication and tellme if works at expected:

$(".grouped_form").on("click", function() {
    $(this).one("wc_variation_form", function() {

It will register the listener of event "wc_variaton_form" only one time after a click events occurs.

.mousedown(), After this code executes, clicks on Trigger the handler will also alert the message. The mousedown event is sent when any mouse button is clicked. To act only on  All we need to do now is figure out a way to detect clicks outside of the menu list and hide the list when out of bounds click is detected. Again, jQuery makes this task an easy one. // Bind click event listener on the body // Hide main menu if user clicks anywhere off of the menu itself. $('body').on('click.hideMenu', function(e)

I've ended up solving this, but the answers have helped me realise what the problem is. After the click event occurs, some parts of the page get refreshed, and the click event isn't linked to the other events. The solution is to store a variable on the click event, and then reset it when the next event occurs.

var clicked = localStorage['clicked'];

    $( ".grouped_form" ).on("click", function() {
      localStorage['clicked'] = "true";

      $(".grouped_form").on("wc_variation_form", function() {
        if (clicked == "true") {
          localStorage['clicked'] = "false";

Only detect click event on pseudo-element, If you must have a click handler on the red region only, you have to make a child (but it leads to the impossibility to detect mouse events on the parent node): After checking the updated jQuery documentation, I saw that these were the  How to Detect a Click Outside of an Element with jQuery. Topic: JavaScript / jQuery. You can use the event.target property to detect a click outside of an element such as dropdown menu. This property returns the DOM element that initiated the event.

Events and Event Delegation, For example, this code listens for a user to click on any li element in the page: 1 2 When you .trigger() an event, you only trigger event handlers that were bound with elements, and then detecting which low-level element initiated the event. It is inadvisable to bind handlers to both the click and dblclick events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two click events before the dblclick and others only one. Double-click sensitivity (maximum time between clicks that is detected as a double click) can vary by operating system and browser, and is often user-configurable.

Element: click event, An element receives a click event when a pointing device button The MouseEvent object passed into the event handler for click has its For IE9 only: please check out https://github.com/mdn/browser-compat-data and  The click event is only triggered after this exact series of events: The mouse button is depressed while the pointer is inside the element. The mouse button is released while the pointer is inside the element. This is usually the desired sequence before taking an action.

jQuery Event Methods, selected elements. The following table lists all the jQuery methods used to handle events. the click event. dblclick(), Attaches/Triggers the double click event. jQuery makes listening for click events really easy. If you want to, for example, detect any time an element with the class .click-me is clicked, you would do this. $('.click-me').click(function (event) { // Don't follow the link event.preventDefault(); // Log the clicked element in the console console.log(event.target); }); Luckily, vanilla JavaScript makes it just as easy thanks to the

  • What is the wc_variation_form event?
  • It's the last event in the sequence. The reason I want to do this is because I made some changes to the html, and a whole sequence of events gets triggered by clicking the button. Everything works as expected, but it changes the visibility of some elements. I figured I'd fix the html at the end of all the events being triggered.
  • I meant I've never heard of an event called wc_variation_form. Is it a custom event of your application?
  • Yes, it's from woocommerce. This is the code where it triggers `t.trigger("wc_variation_form"), a.loading = !1 }, 100) };'
  • Thanks, I tried this, but I think the elements get refreshed, because the "clicked" class was removed, and therefore wouldn't trigger.
  • Are you sure the event "wc_variation_form" is triggered on the target ".grouped_from" after a click event ocurrs on the same target? Can you try next thing: 1) Start a timer when you code begins: console.time("test"), 2) Add next listeners to the target $(".grouped_form").on("click wc_variation_fom", function() {console.timeLog("test")}) 3) Check the developer console for times and the sequence order of events.
  • Yes, I'm sure - when I used the first code block and clicked the button it triggered at the end of the sequence. Getting an error on step 2 - TypeError: console.timeLog is not a function.
  • OK, then replace for this 1) start 2 timers: console.time("test1"); console.time("test2"); 2) $(".grouped_form").on("click", function() {console.timeEnd("test1")}); $(".grouped_form").on("wc_variation_form", function() {console.timeEnd("test2")}); 3) Is the same check.
  • Thanks for your help, I found a solution. I posted it as an answer.