我有两个 AJAX 函数。第一个函数获取第一个输入字段的结果并连接一个字符串，然后更改第二个输入字段的值。第二个输入字段是 (type=”hidden”)。第二个函数检查是否在第二个输入字段中触发了更改，然后在第三个输入字段中显示该值。输入字段 # 2 中的值更改未触发任何内容。Example
<script>
$(document).ready(function () {
var timer = null;
var $result=$("#result");
$result.data('url',$result.val());
function submitForm( input ) {
$.ajax({
type: "POST",
url: "/concatenate/index.php",
data: {input:input},
dataType: "html",
success: function (data) {
var url=$result.data('url'),
newUrl= url+input+'/';
$result.val(newUrl);
}
});
return false
}
$("#input").on("keyup", function() {
var input = $(this).val();
clearTimeout(timer);
timer = setTimeout(function(){
submitForm(input) ;
}, 40);
})
});
$(document).ready(function () {
var timer = null;
var $result=$("#result").val();
function submitForm( input ) {
$.ajax({
type: "POST",
url: "/concatenate/index.php",
data: {input:input},
dataType: "html",
success: function (data) {
$result.val();
}
});
return false
}
$("#result").on("change", function() {
var input = $(this).val();
clearTimeout(timer);
timer = setTimeout(function(){
submitForm(input) ;
}, 40);
})
});
</script>
</head>
<body>
<h1>Enter a word:</h1>
<form action="index.php" method="post">
Input: <input type="text" id="input" name="input"></br>
Concatenated Result1(hidden): <input type="hidden" style="width:200px;" id="result" name="result" value="http//www.example.com/"></br>
Concatenated Result2: <input type="text" id="result2" name="result2" value=""></br>
</form>
最佳答案
这个答案实际上是对您的代码的改造，但也许它会做您需要的并简化事情。
如果您简单地丢弃第二个输入框，并显示#result(使其不隐藏)，我认为这段代码可能会完成您需要完成的工作，并稍微简化一些事情。
这应该做的是不超过每 40 毫秒向服务器提交请求，并且在该请求成功后，我们更新 #result 的显示值。
我现在注意到，如果这确实解决了问题，那么您就完全摆脱了 onChange 问题，因为现在真正的触发器是 keyup 事件。
$(document).ready(function() {
/** get the inputs we might need */
var $result = $('#result');
var $input = $('#input');
$result.data('url', $result.val());
var timer;
/** function to submit data to the server and
update the result input on success */
function submitForm( input, newValue) {
$.ajax({
type: "POST",
url: "/concatenate/index.php",
data: {input:input},
dataType: "html",
success: function (data) {
$result.val(newValue);
}
});
};
/** on key up, fill #result with the url + input */
$input.bind('keyup', function() {
var $this = $(this);
var inp = $this.val();
var url = $result.data('url');
var newValue = url + inp + '/';
if(timer) { clearTimeout(timer); }
timer = setTimeout(function(){
submitForm(inp, newValue) ;
}, 40);
return false;
});
});
关于javascript - 隐藏输入字段内的更改事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19884510/