JQuery не вызывает .change

Question

У меня есть 2 функции: первая обновит поле ввода, а вторая покажет изображение, если введенное значение является действительным изображением.

Я не могу объединить их только в одну функцию, потому что они работают на отдельных страницах (я только что поместил их на одну страницу для примера). Также не могу изменить первую функцию!

Вместо .change, если я использую .blur или .focusout, я должен щелкнуть по полю ввода-вывода, чтобы обновить изображение. Как я могу заставить его работать без лишних кликов?

<script type="text/javascript">
$(document).ready(function() {
   $("input:radio").click(function() {
      $("#image").val($(this).val());
   });
});



$(document).ready(function() {
   $('#image').change(function() {
      var src = $(this).val();
      $('#imagePreview').html(src ? '<img src="' + src + '">' : '');
   });
});
</script>

<form>
<input type="radio" name="name" value="http://www.w3schools.com/images/w3schoolslogo.gif" /> IMG<br />
<input type="radio" name="name" value="http://www.google.bg/logos/classicplus.png" /> IMG<br />
<input type="radio" name="name" value="http://www.w3schools.com/images/w3schoolslogo.gif" /> IMG<br />
<input type="radio" name="name" value="http://www.google.bg/logos/classicplus.png" /> IMG<br />
<input type="radio" name="name" value="http://www.w3schools.com/images/w3schoolslogo.gif" /> IMG<br />
</form>


<input id="image" type="text" name="fname" />



<div id="imagePreview">

</div>

Answer 1

Событие change требует следующих трех вещей:

1. Элемент усиления фокуса
2. Изменение значения
3. Размытие фокуса от элемента

Если вы изменяете значение ввода программно, то вы должны вручную инициировать событие change с помощью jQuery .trigger('change') или ярлыка .change().

В идеале вы должны изменить первую функцию, чтобы вызвать изменение:

$(document).ready(function () {
   $("input:radio").bind('click', function () {
      $("#image")
        .val($(this).val())
        .trigger('change');
   });
});



$(document).ready(function () {
   $('#image').bind('change', function () {
      var src = $(this).val();
      $('#imagePreview').html(src ? '<img src="' + src + '">' : '');
   });
});

Однако, согласно тексту вашего вопроса, вы не можете изменить первую функцию, как я предложил. В таком случае, IMO, для вас нет подходящего варианта. Вы можете установить временной интервал для опроса ввода на его значение и инициировать событие change, если вы заметите, что оно отличается от последней проверки, но это просто уродливо. В любом случае, вам нужно вызвать событие изменения.

Гадкий:

//LEAVE FIRST FUNCTION ALONE

$(document).ready(function () {
  var $imageInput = $("#image"),
    $imagePreview = $('#imagePreview'),
    lastVal;

  $imageInput.bind('change', function () {
    var src = $(this).val();
    $imagePreview.html(src ? '<img src="' + src + '">' : '');
  });

  lastVal = $imageInput.val();

  setInterval(function () {
    var currentVal = $imageInput.val();

    if (currentVal !== lastVal) {
      $imageInput.trigger('change');
      lastVal = currentVal;
    }
  }, 500);
});

Answer 2

Если у вас нет контроля над первой функцией, вам может потребоваться вручную проверить поле ввода, используя интервал, и запустить change вручную.Это не идеально, но будет работать, если это единственный вариант.

$(document).ready(function() {
    setInterval(checkInput, 250);

    var prevInput = '';

    function checkInput() {
        if (prevInput != $('#image').val()) {
            prevInput = $('#image').val();

            $('#image').trigger('change');
        }
    }

    $('#image').change(function() {
        var src = $(this).val();
        $('#imagePreview').html(src ? '<img src="' + src + '">' : '');
    });
});

Пример: http://jsfiddle.net/jtbowden/AWmNA/

Если это все, что делает функция, вы можете исключить шаг:

$(document).ready(function() {
    setInterval(checkInput, 250);

    var prevInput = '';

    function checkInput() {
        if (prevInput != $('#image').val()) {
            prevInput = $('#image').val();

            $('#imagePreview').html(prevInput ? '<img src="' + prevInput + '">' : '');
        }
    }
});

Answer 3

РЕДАКТИРОВАТЬ : Возможно, я неправильно вас понял.По сути, вы хотите вызвать функцию изменения изнутри события щелчка переключателя.Как вы сказали, они есть на отдельных страницах (не знаю почему), вам следует подумать о создании функции для обновления.Что-то вроде этого должно помочь ...

function doProcess(){
   var src = $('#image').val();
   $('#imagePreview').html(src ? '<img src="' + src + '">' : '');
}

$(document).ready(function() {
   $("input:radio").click(function() {
      $("#image").val($(this).val());
      doProcess();
   });
});

$(document).ready(function() {
   $('#image').change(function() {
      doProcess();
   });
});

конечно, с этим вам вообще не понадобится вторая функция (.change), если только пользователь не может вручную ввести значение