Question

我有一个带有一些文本输入元素的简单表单在这个表单之外的某个地方，我有一个span元素，当点击它时会触发formSubmit()函数（做一些ajax的东西）。
HTML：

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

JQuery的：

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

这很有效。

然后我想要更改图标：最初设置为“saveIconGrey.png”，一旦用户更改，它将被“saveIconActive.png”替换任何输入字段中的任何内容我编写了一个简单的setSaveIcon()函数来做到这一点这个函数在这样的变更事件上调用：

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

这也很有效......

但现在，当用户修改输入值并点击提交范围时，只会触发“更改”事件。
用户必须再次单击提交范围以触发点击事件（然后触发ajax内容并完美运行）。

看起来好像$('input').change()事件会隐藏$('#submit').click()事件，当用户点击退出修改后的输入 时，两者都会被触发 在提交范围中的同一次点击。

我在jquery文档中也没有找到任何内容。我在setSaveIcon()尝试了一些“return true”，“return false”，以防它出现某种传播问题，它没有改变任何东西。我必须错过一些非常简单的事情......

修改
示例代码：https://jsfiddle.net/brd59fpz/2/

编辑2：
以前的代码无关紧要，抱歉。这里有问题的代码示例：https://jsfiddle.net/d88u0snf/
并在此处更正了代码：https://jsfiddle.net/d88u0snf/1/
（我发布了答案以获取更多详情）

Answer 1

您不应该使用alert()进行调试。请尝试使用console.log()：

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

DEMO

参考：Why shouldn't I use Alert in JavaScript?

Answer 2

我终于找到了问题所在。

我试图在第一个给出的小提琴中简化代码，并且成功地用另一个代替了真正的问题（参见PeterKA的答案，抱歉你丢失的时间）。

这里有一个真正显示问题所在的小提琴（特别是在线后）：

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

https://jsfiddle.net/d88u0snf/

用户在更改值后点击提交范围：
- 第一个触发事件是输入字段的更改 - 此事件触发DOM中的更改：提交范围（IMG）的HTML内容被替换为新的IMG
- 我想知道为什么在此之后没有触发跨度上的点击事件...但实际上点击实际上出现在SPG中的IMG 中。这个IMG不再存在，它不能发射任何东西，也不会传播到它的父SPAN ......

这里是修正后的小提琴，只修改了IMG的SRC属性，而不是替换整个IMG元素：

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

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

解决后看起来总是那么愚蠢和容易： - （

输入元素上的更改事件会丢弃另一个元素上的单击事件

2 个答案: