Javascript click event listener fires only once

Question

I have a Chrome extension that intercepts and checks tweets before they get posted. To do this, I've add an event listener to the Tweet button. Sine the content is dynamic, I use the solution proposed in this thread:

initialize : function() {
    let that = this;
    let jsInitChecktimer = setInterval(checkForJsFinished, 111);
    function checkForJsFinished () {
        if (document.querySelector("div[data-testid='tweetButtonInline']")) {          
            clearInterval (jsInitChecktimer);
            console.log("Button found");
            that.addSubmitNewTweetClickHandler();
        }
    }
},

addSubmitNewTweetClickHandler : function() {
    let that = this;
    let buttonSubmitTweet = document.querySelector("div[data-testid='tweetButtonInline']");
    buttonSubmitTweet.addEventListener('click', function(e) {
        console.log("CLICK");
        // Stop default event from happening
        e.preventDefault();
        e.stopImmediatePropagation();
        // Do stuff
    });
},

If the tweet passed the checks alright, it gets submitted by programmatically triggering the event using .trigger('click').

This works fine, but only once. After a tweet has been submitted and posted, the event listener on the Tweet button is gone, and I cannot intercept the next tweet to check it. I've tried calling initialize() after submitted again -- maybe the button gets removed and newly added to the DOM (it actually disappears fire a moment when submitting a tweet) -- but the querySelector finds the button immediately. But even after calling initialize() again, no click even on the Tweet button fires.

What could be the issue here? My problem is that I don't even know where to look for and how to debug this.

If your button is part of incoming dynamic content or if you recreate it somewhere you would indeed need to put the listener back on. Note though you should be doing so where ever you are actually adding the content or calling the appropriate methods from there. As using a timed event could run too early You could also use event delegation instead — Patrick Evans, Nov 24 '19 at 01:25
@PatrickEvans It's not my button. It's the default button on the Twitter website to submit new tweets. However, I assume the button is recreated after submitting a tweet. That's way I tried call `initialize()` a second time and I get again the log message `Button found`. I guess there is the chance that the button is removed and added again, after I called `initialize()` again. But then I'm not sure how to properly observe this. — Christian, Nov 24 '19 at 01:59
Do you maybe have access to that button? Try adding new event for that button, but on document wrapper, then even if button is deleted, event will stay. `(document).on('click', '.btn-class', function(){})` — Serlok, Nov 24 '19 at 07:28

Christian · Accepted Answer · 2019-11-25T07:00:49.110

After many more hours, I've finally figured it out. The problem was essentially the highly dynamic content of the new Twitter website. After submitting a tweet, the Tweet button gets indeed removed and added again. In needed to do a serious of changes:

Use a MutationObserver to keep track of any changes. Every time there's a change, call the initialize() function. To avoid too many calls, I do this in case of certain changes (unnecessary detail here)

Change the addSubmitNewTweetClickHandler() method so that the event listener first gets removed in order to avoid duplicate listeners (please note that I use objects hence the use of this compared to my original question)

addSubmitNewTweetClickHandler : function() {
  let that = this;
  let buttonSubmitTweet = document.querySelector("div[data-testid='tweetButtonInline']");
  buttonSubmitTweet.removeEventListener('click', this.handleSubmitNewTweetClick ); 
  this.handleSubmitNewTweetClick = this.handleSubmitNewTweetClick.bind(this)
  buttonSubmitTweet.addEventListener('click', this.handleSubmitNewTweetClick );    
},

This change required to create the reference function handleSubmitNewTweetClick

Overall, it's still not a perfect solution since I call initialize() many unnecessary time. However, I failed to reliably identify when the Tweet button was added to the document. When I used the MutationObserver none of the added nodes had the attribute data-testid which I need to identify the correct button. I have node idea why this attribute was not there. Maybe the attribute is added some times after added to button, but even with an additional MutationObserver looking for attribute changes I could detect this.

Anyway, it works now and it's only for a prototype.

Javascript click event listener fires only once

1 Answers1