change event not trigging from the page

Initially I posted this question. But subsequently I've got the answer by trial and error. Now I'd like to know the reason why my answer will work.

In the saved page below when I run $("#debitCard").change(); from extension it does not work but when I run from Chrome Console it works?

Why this behavior could be different from when run from Console? I've even run it within setTimeout

I've even created a button in the HTML upon clicking which it will call this function but even that isn't working. However calling from the Console is working every time.

Answer

I replaced this $("#debitCard").change(); to this:

var element = document.getElementById('debitCard'); var event = new Event('change'); element.dispatchEvent(event); 

I want to know the reason of this quirk of Javascript/JQuery

1 Answers

Answers 1

The jQuery you have in the extension runs in a different scope to the jQuery or library in the content page.

If the functionality in the content page uses event handlers using jQuery or similar, you can't call those handlers from the jQuery in the extension scope because you cannot reference them.

But triggering the event, either natively or with jquery in the content script, does work and will fire the page's handlers.

the reference

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati