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?

What console errors are you getting? – evolutionxbox Jul 19 '16 at 15:17 — evolutionxbox, Jul 19 '16 at 15:17

score 1 · Accepted Answer · answered Jul 19 '16 at 15:20

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

answered Jul 19 '16 at 15:20

Rory McCrossan

331,213
40
305
339

Oh my god, how did you inspected the DOM? Can you pehleeeeez tell me. I mean this is extreme expertise. – Zameer Ansari Jul 19 '16 at 15:25
1

Depending on your browser it's right click any element > `Inspect`, or just press the F12 key :) – Rory McCrossan Jul 19 '16 at 15:26

select jquery onChange not working with X-editable

1 Answers1