jQuery on("paste") в первый раз не получает и не передает значение

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

Сценарий jQuery, который я написал, должен получить входное значение для действия "вставить" и передать его с помощью ajax контроллеру codeigniter.

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

Автор сценария:

<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") работает прямо над действием "paste" и до того, как вставка будет фактически выполнена. Если кто-нибудь подскажет, как сделать тайм-аут, чтобы получить значение после вставки, я могу двигаться дальше.

Источник

3 ответа

Решение

Задача решена.

Как я уже говорил, действие "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 за поддержку.

Источник

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

Источник

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

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

вот демо я включил json2.js из CDN

Источник

Согласно решению, найденному sznowicki, он работал с использованием setTimeOut.

Мой пример:

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

Спасибо!

Источник
Другие вопросы по тегам