0

I have a simple form with some text input elements.
Somewhere outside of this form, I have a span element which triggers a formSubmit() function when clicked (doing some ajax stuff).
HTML:

<span id="submit">
    <img src="saveIcon.png" />
</span>

JQuery:

$('#submit').click( formSubmit );

This worked perfectly.

Then I wanted the icon to change: initially set to "saveIconGrey.png", it shall be replaced by "saveIconActive.png" as soon as the user changes anything in any input field. I coded a simple setSaveIcon() function to do that.
This function is called on change events like this:

$('input').change( setSaveIcon );

This also works perfectly...

But now, when the user modifies an input value and clicks on the submit span, only the "change" event is triggered.
User has to click on the submit span a second time to trigger the click event (and then the ajax stuff is triggered and works perfectly).

It looks as though the $('input').change() event would be hiding the $('#submit').click() event, where both should be fired when the user clicks out of the modified input and in the submit span by the same click.

I found nothing, neither in the jquery documentation nor here. I tried some "return true", "return false" in setSaveIcon() in case it were some kind of propagation problem, it didn't change anything. I must be missing something very simple...

Edit:
Sample code here: https://jsfiddle.net/brd59fpz/2/

Edit 2:
Previous code is irrelevant, sorry. Problematic code sample here: https://jsfiddle.net/d88u0snf/
And corrected code here: https://jsfiddle.net/d88u0snf/1/
(I posted an answer for further details)

fpierrat
  • 739
  • 7
  • 25
  • 1
    Post a complete code example please so we can reproduce the issue. – j08691 Aug 26 '15 at 14:19
  • Post complete code, HTML and jQuery, we want to see how you bind events and in what sequence. onChange should not interfere with onClick. – Victor Levin Aug 26 '15 at 14:27
  • Quite likely you're binding an event in an event handler of another event. In addition to providing the relevant code, if you can provide a jsfiddle demo, you're bound to get your answer that much quicker. – PeterKA Aug 26 '15 at 14:28
  • See my edit with jsfiddle link. Thanks for being so quick ;-) – fpierrat Aug 26 '15 at 14:30
  • Your jsfiddle does not in any way demonstrate the problem you've described. May be I missed something. – PeterKA Aug 26 '15 at 14:31
  • @PeterKA. Probably you did... ;-) when you change a value and click on the span, it only triggers the input.change event. The span.click event only triggers, when you DON'T change a value at the same time. At least the fiddle does so on my browser. – fpierrat Aug 26 '15 at 14:35
  • Works fine here: https://jsfiddle.net/fiddleyetu/brd59fpz/3/. [Do not use alert for debugging](http://stackoverflow.com/questions/20359807/why-shouldnt-i-use-alert-in-javascript). – PeterKA Aug 26 '15 at 14:36

2 Answers2

0

You should never use alert() for debugging purposes. Try using console.log() instead:

console.log( 'ajax about to start' );

DEMO

REF: Why shouldn't I use Alert in JavaScript?

Community
  • 1
  • 1
PeterKA
  • 24,158
  • 5
  • 26
  • 48
  • My real code doesn't use any alert, just $(...).html('') to change the icon. Still it doesn't work, just fires one of the two events. I thought simplifying for the fiddle would help but it just hid the problem behind another instead, sorry. Here a more complete fiddle: https://jsfiddle.net/d88u0snf/ – fpierrat Aug 26 '15 at 15:26
  • OMG! So stupid! Click occurs on the IMG in the span. First event fired is: input.change . The triggered code modifies DOM, replaces SPAN's content... Then the IMG on which the click occured doesn't exist any more, so the click can't be propagated to it's parent SPAN! I'll try to make it clearer in an answer after some new tests. – fpierrat Aug 26 '15 at 15:31
0

I finally figured out what the problem was.

I tried to simplify the code in the first given fiddle, and just succeeded in replacing the real problem with another one (see PeterKA's answer, sorry for the time you lost on this).

Here a fiddle that really shows what the problem was (especially following line):

$('#submit').html("<img src='http://fpierrat.fr/bee/pic/ico_save.png' />");

https://jsfiddle.net/d88u0snf/

When the user clicks on the submit-span after having changed a value:
- the first fired event is the change on the input field.
- this event triggers a change in the DOM: the HTML content of the submit-span (an IMG) is replaced with a new IMG
- I wondered why the click event on the span wasn't fired after that... BUT the click actually occured on the IMG in the SPAN. This IMG no longer exists, it can't fire anything nor propagate to it's parent SPAN...

Here the corrected fiddle, where just the SRC attribute of the IMG is modified, instead of replacing the whole IMG element:

$('#submit img').attr("src","http://fpierrat.fr/bee/pic/ico_save.png");

https://jsfiddle.net/d88u0snf/1/

It always look so stupid and easy when solved :-(

fpierrat
  • 739
  • 7
  • 25