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

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

11 голосов
/ 28 января 2012

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

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

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

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>

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

РЕДАКТИРОВАТЬ3: Мой друг дал мне подсказку. on ("paste") работает прямо над действием "paste" и до того, как вставка будет фактически выполнена. Если кто-нибудь подскажет, как сделать тайм-аут, чтобы получить значение после вставки, я могу перейти.

Ответы [ 4 ]

21 голосов
/ 29 января 2012

Проблема решена.

Как я уже говорил, действие "on (" paste ")" выполняется прямо на фактической вставке.Таким образом, функция выполняется до того, как значение будет вставлено во вход.Это потому, что первая вставка захватывает и передает значение ввода по умолчанию (для моего примера это значение равно нулю).

Решение - установить время ожидания.Правильный код выглядит так и работает просто отлично. 

$("#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 за поддержку.

1 голос
/ 22 апреля 2015

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

1 голос
/ 28 января 2012

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

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

0 голосов
/ 24 июня 2019

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

Мой пример: 

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

Спасибо!

...