76238

Tampermonkey: Trigger event does not work for element

Question:

I'm trying to add some functionality using Tampermonkey on top of a providers angular application but I'm stuck at this simple thing. I can't replicate the issue using CodePen so we're going to have to go for theories and suggestions. I'll try to be as specific as I can.

Adding this interval when the page loads to check when an input with the id serialNumberInput is available. Then I'm adding a dropdown to the form, and attach an onChange event to it to update the serial input field with the value of the selected option. However, the trigger parts just never happens. It does work when I enter them manually, but not with the script.

var populateSerialNumbersTimer = setInterval(function(){ var serial = $("input#serialNumberInput"); if($(serial).length >= 1){ $(serial).css("display", "inline").css("width", "50%"); $(serial).after(deviceToSerialSelectionHTML); $("select#deviceToSerial").on("change", function(){ $(serial).val($("select#deviceToSerial").val()); $(serial).trigger("change"); $(serial).trigger("blur"); }); clearInterval(populateSerialNumbersTimer); } }, 200);

<a href="https://i.stack.imgur.com/5dTGO.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/5dTGO.png" data-original="https://i.stack.imgur.com/5dTGO.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

I've thought about it and considering how the serial number ends up in the text field the field must be accessible. Maybe it's that the events that I'm trying to trigger has not been declared at the time of the function declaration?

Suggestions much appreciated.

Answer1:

It looks like jQuery tries to cache the event somehow. This is how I solved it with native javascript in case someone else is interested:

function triggerEvent(e, s){ "use strict"; var event = document.createEvent('HTMLEvents'); event.initEvent(e, true, true); document.querySelector(s).dispatchEvent(event); } $("select#deviceToSerial").on("change", function(){ serialNumberInput.val($("select#deviceToSerial").val()); triggerEvent("change", "input#serialNumberInput"); triggerEvent("blur", "input#serialNumberInput"); }

Recommend

  • Get value of selected drop down list item
  • Error: ReferenceError: event is not defined [duplicate]
  • Remove White Space Around ToolStripControlHost
  • How can I prevent duplicate wrappers on a jQuery DataTable when navigating back in the presence of T
  • display selected value of the drop down in jsp page
  • “Big” scrollbar for spinner
  • Redirect to controller/view when dropdownlist changed
  • OpenMP for dependent variables
  • How to upload excel file in angular js?
  • Dropdown menu with the dropdown-menu-right class does not align to the right
  • Google web service to get time by location? [duplicate]
  • ActionBar three-dot dropdown opens at the wrong place
  • Xcode launch app error in Mac 10.9 Mavericks
  • Sending dynamic email reminders in Ruby on Rails?
  • How to mount dynamically single file component in Vue.js
  • Html select multiple get all values at onchange event
  • LatLong falls within a given polygon in D3 + Leaflet
  • Remove every nth element from swift array
  • How can i use Django smart select to filter ManyToManyField?
  • Trouble Attaching Call Back to Unobtrusive Validation Show Error
  • XBee Linux Serial Port on Rasberry Pi
  • Arduino making decision according to a packet received from serial port
  • Client side validation mvc dropdown
  • Creating a DropDownList
  • Validate child input components on submit with Vee-Validate and vue js 2
  • ListItem.Attributes.Add not working
  • How do I superscript characters in a UIButton?
  • d3 v4 drag and drop with TypeScript
  • JQuery Internet Explorer and ajaxstop
  • Is my CUDA kernel really runs on device or is being mistekenly executed by host in emulation?
  • Opengl-es onTouchEvents problem or a draw problem? [closed]
  • retrieve vertices with no linked edge in arangodb
  • using conditional logic : check if record exists; if it does, update it, if not, create it
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • Proper way to use connect-multiparty with express.js?
  • How to set the response of a form post action to a iframe source?
  • Understanding cpu registers
  • How to stop GridView from loading again when I press back button?
  • Linking SubReports Without LinkChild/LinkMaster
  • Add sale price programmatically to product variations