select jquery onChange not working with X-editable

Question

In this fiddle, I'm using X-editable. In the corresponding fiddle, I'm not able to make the below code working:

$('#practice').on('change', function() {
  alert(this.value);
});

• I'm already using anonymous function
• I'm not using invalid expressions
• I'm using this
• I'm using select
• Console is not throwing any error as such.

Where am I going wrong?

Answer 1

If you inspect the DOM when the editable is active (ie. the select is visible) you'll see that the select is not actually a child of the #practice span - it's in a sibling span named .editable-container. This is why your delegated event handler on #practice is not working.

That being said, if you read the X-Editable documentation there is an event you can hook to to achieve this directly without you needing to attach your own events - save.

Try this:

$('#practice').on('save', function(e, params) {
    alert(params.newValue);
});

Updated fiddle