当按钮位置改变时，单击事件不会触发。

Question

我有一个文本框，当发生onchange事件时会动态添加一些元素。由于这个原因，提交按钮的位置会发生改变。如果用户在文本框中输入一些内容并单击按钮，则onclick事件不会触发。我怀疑是因为同时改变了按钮的位置，浏览器认为点击事件发生在页面上而不是按钮上。

有没有办法处理这种情况？我不能将按钮移到运行时添加的元素上面。

我创建了一个样例jsfiddle：http://jsfiddle.net/WV3Q8/3/ HTML:

<p>Enter something</p>
<input type="text" id="input" onchange="onChange()">
<div id="log"></div>
<button value="Go" style="display:block" type="button" onclick="submit();" id="btn-submit">Submit</button>

JavaScript：

function onChange(){
    var value = $('#input').val();
    $('#log').append('<p>New value: ' + value + '</p>');
}

function submit(){
    alert('value submitted');
}

编辑1

测试用例（问题涉及第二个测试用例）：在所有浏览器中都发生（Chrome，IE 10等）：

1. 在文本框中输入内容并按Tab键，p元素将被添加并移动按钮的位置。现在点击提交按钮。将弹出警报。
2. 在文本框中输入内容并单击提交按钮。p元素被添加，但不会显示警报。

编辑2：由于显而易见的原因（它们在每次按键时触发），我不能使用其他按键事件，例如keyup，keydown或keypress。 setimeout也不可能，因为有一些单选按钮是在文本框的onchange事件上运行时生成的。在向用户显示这些单选按钮之前点击提交按钮是不明智的。

- Neeraj Gulia

---

它在我的Firefox中运行良好。 - blue

在我的Chrome/Mac上运行良好！ - lshettyl

和在 Chrome 上一样，你的 JSfiddle 可以运行。 - radia

在我的Firefox/Linux上可以运行，你用的是哪个浏览器？ - Brovoker

更改输入值后，直接单击按钮时，触发的是输入框的onchange事件而不是按钮的onclick事件。 - Bhavik

Answer 1

对于您的第二个编辑，您需要使用setTimeout()方法延迟附加操作，如下所示：

setTimeout(function(){
    $('#log').append('<p>New value: ' + randomVal + '</p>');
},100);

Fiddle

- Jai

---

在这个解决方案中，用户在点击按钮之前无法查看添加的元素。 - Neeraj Gulia

Answer 2

工作的Fiddle
一种解决方法是使用onkeypress

<input type="text" id="input" onkeypress="onChange();">

更新
如果您可以使用mousedown事件，它将工作得很好。

更新的Fiddle

- Bhavik

---

我不能使用keypress，因为它会在用户按下每个键时触发。需要使用onblur或onchange。 - Neeraj Gulia

Answer 3

在 onChange() 中，你缺少了一个 return true 语句。

这是 jsfiddle 上的代码。

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

function submit(){
    alert('value submitted');
}

编辑：另一种解决方案可能是在submit()内调用onChange()。

- blue

---

相同的问题仍然存在。 - Brovoker

Answer 4

我会在keyup事件中使用setTimeout：

var time;

function onChange() {
    clearTimeout(time);
    time = setTimeout(function() {
        var value = $('#input').val();
        $('#log').append('<p>New value: ' + value + '</p>');
    }, 200);
}

用户完成输入后，它将追加文本。

演示：http://jsfiddle.net/WV3Q8/8/

- dfsq

Answer 5

这不是一个好的解决方案，但你可以像这样触发提交函数：

function onChange(){    
    var value = $('#input').val();
    $('#log').append('<p>New value: ' + value + '</p>');

    submit();
}

function submit(){

    alert('value submitted');


}

演示

- Bhojendra Rauniyar

---

通过这个解决方案，即使用户在其他地方（即不是在提交按钮上）点击，提交也会被调用。正如我在第二次编辑中提到的那样，在运行时根据输入添加了一些单选按钮，因此如果用户点击这些单选按钮，提交将被触发。 - Neeraj Gulia

我找到了一个适合你的方法：http://jsfiddle.net/WV3Q8/21/，请将提交按钮中的函数更改为onChange()。 - Bhojendra Rauniyar

使用http://jsfiddle.net/WV3Q8/21/解决方案丢失了文本框onchange功能。 - Neeraj Gulia