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等）：

在文本框中输入内容并点击标签，添加p元素并移动按钮的位置。现在点击提交按钮。显示警报。
在文本框中输入内容，然后单击“提交”按钮。添加了p元素，但未显示警报。

编辑2：我不能使用其他关键事件，如keyup，keydown或keypress，原因很明显（它们会在每个按键上触发）。 setimeout也是不可能的，因为有一些单选按钮是在运行时在textbox的onchange事件上生成的。在没有向用户显示这些单选按钮的情况下点击提交按钮是不明智的。

Answer 1

Working Fiddle
一种方法是使用onkeypress

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

<强>更新
如果您可以使用mousedown事件，那就可以了。

Updated Fiddle

Answer 2

对于您的编辑＃2，您必须使用setTimeout()方法延迟附加，如下所示：

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

Fiddle

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（）。

Answer 4

我会将setTimeout与keyup事件一起使用：

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/

Answer 5

这不是一个好的解决方案，但您可以像这样触发案例的提交功能：

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

    submit();
}

function submit(){

    alert('value submitted');


}

demo

按钮onclick在其位置更改时不会触发

5 个答案:

Updated Fiddle

Fiddle

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