jQuery on("paste") 第一次没有抓取或传递值

Question

对我来说真正的交易问题，因为我不知道如何解决它。

我编写的 jQuery 脚本应该在“粘贴”操作中获取输入值，并通过 ajax 将其传递给 codeigniter 控制器。

它实际上工作正常，但前提是我第二次（以及更长时间）粘贴该值。当我将某些 div 或其他 DOM 元素的 on("paste") 更改为 on("click") 时，它也可以正常工作。

脚本：

<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 );
     }

});

});

任何帮助将不胜感激

编辑：还有一个提示。

此特定脚本中的

val() 实际上在粘贴操作之前 取值。 如果我在此输入中写入一些内容，然后将其删除并粘贴其他内容，它实际上会将我写入的值传递给控制器​​，而不是我粘贴的值。

编辑2： 好的，我很确定这是粘贴的 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>

此脚本应将输入值添加到 div#thumbs。它不适用于第一次粘贴操作。其次，它确实有效。

EDIT3：我的朋友给了我一个提示。 on("paste") 适用于“粘贴”动作，在粘贴实际完成之前。如果有人提示我如何在粘贴后超时以获取值，我可以继续。

Answer 1

问题解决了。

就像我之前说的，“on("paste")” 操作正在实际粘贴上执行。因此，在将值粘贴到输入之前完成功能。那是因为第一次粘贴抓取并传递输入的默认值（我的示例为 null）。

解决办法是设置超时。正确的代码看起来像这样，并且工作得很好。

$("#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);

});

问题已解决，感谢@3nigma 的支持。

Answer 2

我最终使用了“oninput”，除非您需要支持 IE8 或更低版本，否则它工作正常。

Answer 3

这里很好用

DEMO

更新：

您必须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: "  );
         }        
        });
      }); 

这是一个DEMO，我已经包含了来自cdn 的json2.js

Answer 4

根据 sznowicki 找到的解决方案，它使用 setTimeOut 工作。

我的例子：

$("#search-product").on("paste", function(){
    let $element = $(this);
    setTimeout(function(){
        search($element)
    },0);
});

谢谢！