jQuery第一次使用on("paste")无法获取或传递值

Question

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

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

它实际上运行良好，但仅当我第二次（及更多次）粘贴值时才有效。如果我将 on("paste") 更改为某些 div 或其他 DOM 元素的 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 中。但是第一次粘贴操作时它并不起作用。在第二次粘贴操作后，它实际上是有效的。

编辑3：我的朋友给了我一个提示。 on("paste") 在“粘贴”操作和实际完成粘贴之前就能正常工作。如果有人能给我一个提示，如何设置超时以在粘贴之后获取值，那么我就可以继续进行。

- sznowicki

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 的支持。

- sznowicki

---

我希望我一小时前就看到了这篇文章。Jquery，你能把你刚刚浪费的那个小时还给我吗？^^ - azzy81

你应该也可以将超时设置为0来完成这个任务。 - Constant Meiring

Answer 2

我最终使用了'oninput'，这个方法在不需要支持IE8及以下版本的情况下运行良好。

- Roger

Answer 3

这里运行得很好。 演示 更新:

你需要将对象 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: "  );
         }        
        });
      }); 

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

- Rafay

---

我深入了解并将一个对象添加到postData中，现在它看起来像这样：var postData = { 'url' : $("#link").val(), 'test' : 'testtest' };仅在第一次粘贴时，“test”传递给控制器，[url]为空。不知道问题出在哪里。 - sznowicki

为什么我要这样做？如果我把 on("paste") 改成 on("click")，它每次都能正常工作。它以正确的方式将输入值传递给控制器。如果我错了，请纠正我。 - sznowicki

那么你遇到了什么问题，我无法理解。 - Rafay

fiddle 这是一个脚本的示例，第二次粘贴时可以正常工作。 - sznowicki

Answer 4

使用sznowicki找到的解决方案，使用setTimeOut成功运行。

我的例子：

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

谢谢！

- Rayan Marcus