JQuery .click only working every 2nd click

Question

I am using JQuery with ReactJS. When clicking on the button, the first click does nothing. However, on the second click the action I am trying to achieve does work. But it's an every other click win.

I've tried adding $(document).ready() inside of the openSubscriptionModalFromButton function. This doesn't fix the issue.

I am for sure passing in openSubscriptionModalFromButton to my components.

I've researched .click on Jquery docs, and I've also read the articles saying to not use Jquery in React ;).

** In the landing component, the button I want Jquery to click (see id)

<button
 id="right-top-corner-button_upgrade"
>
 UPGRADE/LANDING
</button>

** In the Toolbar - a modal pops up to ask if you want to upgrade.

 openSubscriptionModalFromButton() {
  $('#right-top-corner-button_upgrade').click() 
  this.closeDialog() // closes the Modal pop-up on after the click
 }

** In the Modal from Toolbar

<button
 onClick={() => props.openSubscriptionModalFromButton()}
>
 Upgrade/Toolbar
</button>

Right now I'm just console logging 'click' and on the 2'click' (second click), it works.

I'm expecting the upgrade/toolbar button to open the modal on every click, instead of every other.

Appreciate any help. Thank you!

try this instead $('#right-top-corner-button_upgrade').on("click", function() { this.closeDialog() }) — James Brown
– James Brown, Commented Jul 10, 2019 at 0:42
@MannyQuintanilla thank you for the suggestion but it isn't working. — Cara
– Cara, Commented Jul 10, 2019 at 16:50

critical_error · Accepted Answer · 2019-07-10 00:49:50Z

1

Have you tried simply adding an event listener to the button to avoid any other potential conflicts (jQuery, etc...)?

// After the page is loaded.
window.onload = function () {

  var UpgradeButton = document.getElementById( 'right-top-corner-button_upgrade' );
  UpgradeButton.addEventListener( 'click', function () {
    alert( 'Call my code here.' );
  } );

};

<button id="right-top-corner-button_upgrade">UPGRADE/LANDING</button>

answered Jul 10, 2019 at 0:49

critical_error

6,8263 gold badges16 silver badges17 bronze badges

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

2 Comments

Cara Over a year ago

Thank you for the response :) -- I tried adding the event listener and was not successful. Appreciate it.

Shamseer Ahammed Over a year ago

my regular onlick jquery fuction only worked on second click, this solved my problem

Phoenix · Accepted Answer · 2019-07-10 01:14:09Z

0

It may be workable, but mixing jQuery and React tends to have a few problems. The main problem is that when a React component re-renders (which happens if any ancestor component's state or props change, by default), any DOM nodes belonging to that component will be replaced with what React thinks they should be — and clobber any changes that jQuery has made to those DOM elements.

One possibility for what's going wrong is that something is causing a state change in some ancestor of your modal component, which clobbers the fact that it was just opened by jQuery, since jQuery tracks whether a modal is open by changing attributes on the DOM element.

So, my suggestion: Make sure none of your ancestors re-render due to changing state when you click this button. This may require defining shouldComponentUpdate to return false under circumstances where you don't want this to re-render.

This may be more directly debuggable with a JSFiddle; for now, have my speculation :)

answered Jul 10, 2019 at 1:14

Phoenix

1291 silver badge8 bronze badges

1 Comment

Cara Over a year ago

Thank you for this explanation on React vs Jquery - it makes a lot of sense that this could be happening. I myself was surprised at how much JQuery is in this React app and was hoping to make it work from what is already there. I think what I will have to do is write new functions completely bypassing Jquery to make this work correctly.

Collectives™ on Stack Overflow

JQuery .click only working every 2nd click

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related