单击 Jquery 中的文本框更改停止按钮

Question

我在使用文本框时出现奇怪的行为

我在页面上有一个文本框和按钮，它们分别有更改和单击事件。两者甚至都可以单独工作，但是当我在更改文本框上的值后单击按钮时，单击事件不会触发。

$("#txtInput").on("blur", function onChange() {
    var randomVal = Math.floor((Math.random() * 100) + 1);
    $('#log').append('<p>New value: ' + randomVal + '</p>');
    return true;
});


$("#btn-submit").on("click", function submit() {
    alert('value submitted');
});

帮我理解一下。

这是 jsfiddle https://jsfiddle.net/WV3Q8/25/ 的 link。

Answer 1

将按钮放在结果上方 div。因为，模糊事件发生在按钮点击事件之前，导致按钮向下移动。（对于要触发的点击事件，鼠标按下和鼠标弹起都发生在同一个元素上。）这就是它没有被触发的原因。

<p>Enter something</p>
<input type="text" id="txtInput">
<button value="Go" style="display:block" type="button" id="btn-submit">Submit</button>
<div id="log"></div>

Fiddle

单击 Jquery 中的文本框更改停止按钮

Textbox change stopping button click in Jquery

jquery

textbox

button