jQuery on("paste") 第一次不抓取或传递值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9045692/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery on("paste") for the first time doesn't grab or pass the value
提问by sznowicki
Real deal problem for me, because I have no clue to resolve it.
对我来说真正的交易问题，因为我不知道解决它。
jQuery script I wrote should grab the input value on "paste" action and pass it by ajax to codeigniter controller.
我编写的 jQuery 脚本应该获取“粘贴”操作的输入值，并通过 ajax 将其传递给 codeigniter 控制器。
It actually works fine, but only if I paste the value for the second (and further) time. It works fine too when I change on("paste") to on("click") for some div or other DOM element.
它实际上工作正常，但前提是我粘贴第二次（和更多）时间的值。当我将某些 div 或其他 DOM 元素的 on("paste") 更改为 on("click") 时，它也能正常工作。
Script:
脚本：
<script type="text/javascript">
$("#link").on("paste", function(){
$("#thumbs").empty().html("<p>loading</p>");
var postData = {
'url' : $("#link").val()
};
$.ajax({
type: "POST",
url: "/thumb/ajax/",
data: postData , //assign the var here
success: function(msg){
$("#thumbs").html( "Data Saved: " + msg );
}
});
});
});
Any help would be appreciated
任何帮助，将不胜感激
EDIT: one more hint.
编辑：还有一个提示。
val() in this particular script actually takes value beforethe paste action. If i write something to this input, then remove it and paste something else it would actually pass to the controller the value i wrote, not the one I pasted.
这个特定脚本中的 val() 实际上在粘贴操作之前取值。如果我向该输入写入一些内容，然后将其删除并粘贴其他内容，它实际上会将我写入的值传递给控制器，而不是我粘贴的值。
EDIT2: OK, I'm pretty sure that's jQuery problem with paste.
EDIT2：好的，我很确定这是粘贴的 jQuery 问题。
<script type="text/javascript">
$("#link").on("paste", function(){
$("#thumbs").empty().html("<p>loading</p>");
var postData = {'url' : $("#link").val() };
$("#thumbs").html($("#link").val());
});
</script>
This script should add value from input to div#thumbs. It doesn't for the first paste action. On second it's actually works.
此脚本应将输入值添加到 div#thumbs。它不适用于第一次粘贴操作。第二，它实际上是有效的。
EDIT3: My friend gave me a hint. on("paste") works right on "paste" action and before the paste is actually done. If anyone give me a hint how to make a timeout to grab the value after the paste I can move on.
EDIT3：我的朋友给了我一个提示。on("paste") 适用于“粘贴”操作，并且在粘贴实际完成之前。如果有人给我提示如何在粘贴后超时以获取值，我可以继续。
回答by sznowicki
Problem solved.
问题解决了。
Like I said before, "on("paste")" action is being done right on the actual paste. So function is being done before the value is pasted to the input. That's because first time paste grabs and pass the default value of the input (null for my example).
就像我之前说的，“on("paste")” 动作是在实际粘贴上完成的。因此，在将值粘贴到输入之前，正在完成功能。这是因为第一次粘贴抓取并传递输入的默认值（我的示例为 null）。
Solution is to set the timeout. Right code looks like that and works just fine.
解决方法是设置超时时间。正确的代码看起来像这样并且工作得很好。
$("#link").on("paste", function(){
setTimeout(function() {
$("#thumbs").html("<p>loading</p>");
var postData = {
'url' : $("#link").val()
};
$.ajax({
type: "POST",
url: "/thumb/ajax/",
data: postData , //assign the var here
success: function(msg){
$("#thumbs").html( "Data Saved: " + msg );
$(".thumb").click(function(){
(this).attr('id');
});
}
});
}, 500);
});
});
Problem solved, thanks @3nigma for support.
问题已解决，感谢@3nigma 的支持。
回答by Rafay
it works just fine here
它在这里工作得很好
update:
更新：
you will have to stringifythe object in order to send it to the server, include json2.jsyour code will look like
您必须stringify使用对象才能将其发送到服务器，包括json2.js您的代码将如下所示
$("#link").on("paste", function(){
$("#thumbs").empty().html("<p>loading</p>");
var postData = { 'url' : $("#link").val(), 'test' : 'testtest' };
$.ajax({
type: "POST",
url: "your/url",
data:JSON.stringify(postData),
success: function(msg){
$("#thumbs").html( "Data Saved: " );
}
});
});
回答by Roger
I ended up using 'oninput', which works fine unless you need to support IE8 or below.
我最终使用了“oninput”，除非您需要支持 IE8 或更低版本，否则它可以正常工作。
回答by Rayan Marcus
It worked using setTimeOut, according to the solution found by sznowicki.
根据 sznowicki 找到的解决方案，它使用 setTimeOut 工作。
My example:
我的例子：
$("#search-product").on("paste", function(){
let $element = $(this);
setTimeout(function(){
search($element)
},0);
});
Thank you!
谢谢！
