0

I am trying to trigger an event when an input textbox changed:

$('.packeta-selector-branch-id').on('change', function () { alert('helo'); })

This works only If I manually type something in the textbox, but in my case where an external javascript is setting the textbox value, not working.

I created a little jsfiddle to show this:

https://jsfiddle.net/6vnuqxa0/

To try out:

  1. Click on Choose pickup point
  2. Select something from list and click on "Choose this pick up point".

Any ideas how to resolve this issue?

Adrian
  • 2,576
  • 9
  • 49
  • 97
  • This is IMO the only valid use case for MutationObserver: when you can't control the code that is changing the input. If you can control the code that is changing the input, then just have it fire the onchange event for the textbox after it updates the value. – McHat Jan 09 '19 at 20:28

2 Answers2

1

The selected answer to jQuery watch for domElement changes? suggests binding to the DOMSubtreeModified event. I have tried iin your fiddle and it works! The answer does mention that this event may be deprecated, but it is worth looking into.

In your case, add an id to your div so that you have:

<div id="packeta-selector-branch-id" class="packeta-selector-branch-id"></div>

Then the following code will trigger the alert when the contents of that div change.

$('#packeta-selector-branch-id').bind('DOMSubtreeModified', function(e) {
  if (e.target.innerHTML.length > 0) {
    alert('helo');
  }
});

Otherwise, I would look at the widget itself and try and determine if it fires any events on select. If so, you could attach some behaviour to that event.

thompsonsj
  • 469
  • 4
  • 4
0

trigger('change') when click button. but a ID or name on your input would be better

$(document).off('click', '.button select-branch').on('click', '.button select-branch', function(){
    $('.packeta-selector-branch-id').trigger('change');
})
Community
  • 1
  • 1
ANTIOCO Benjamin
  • 1
  • 2