jQuery不会触发.change

Question

我有2个函数：第一个函数将更新输入字段，第二个函数将在输入值是有效图像的情况下显示图像。

我不能将它们合并为一个函数，因为它们在单独的页面上工作（对于示例，我刚刚将它们放在一页上）。 我也不能更改第一个功能！

如果我使用.blur或.focusout而不是.change那么我必须单击输入框并单击该框以更新图像。 如何在没有额外点击的情况下使它正常工作？

<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. 元素的焦点模糊

如果要以编程方式更改输入的值，则必须通过jQuery的.trigger('change')或.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）。