JQuery on ( "paste" ) в первый раз не захватывает или не передает значение

Реальная проблема сделки для меня, потому что у меня нет подсказки, чтобы ее разрешить.

jQuery script Я написал, чтобы захватить входное значение в действии "вставить" и передать его с помощью ajax на контроллер codeigniter.

Он работает нормально, но только если я вставлю значение для второго (и далее) времени. Он отлично работает, когда я изменяю ( "вставлять" ) на ("click") для некоторого div или другого элемента DOM.

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

});

});

Любая помощь будет оценена

EDIT: еще один намек.

val() в этом конкретном script фактически принимает значение до действия вставки. Если я что-то напишу на этот вход, то удалите его и вставьте что-то еще, что он фактически передаст контроллеру значение, которое я написал, а не тот, который я вставил.

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>

Этот script должен добавить значение из ввода в div # thumbs. Это не для первого действия пасты. На втором это действительно работает.

EDIT3: Мой друг дал мне подсказку. on ( "paste" ) работает прямо над действием "paste" и до того, как на самом деле делается паста. Если кто-нибудь подскажет, как сделать тайм-аут, чтобы захватить значение после пасты, я могу двигаться дальше.

Ответы

Ответ 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 за поддержку.

Ответ 2

он отлично работает здесь

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 я включил json2.js из cdn

Ответ 3

Я закончил использование "oninput", который отлично работает, если вам не нужна поддержка IE8 или ниже.

Ответ 4

Он работал с использованием setTimeOut, в соответствии с решением, найденным sznowicki.

Мой пример:

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

Спасибо!