jQuery 不会触发 .change答案

【问题标题】：jQuery dont trigger .changejQuery 不会触发 .change
【发布时间】：2012-02-06 17:19:58
【问题描述】：

我有两个功能：第一个将更新输入字段，第二个将在输入值是有效图像时显示图像。

我不能将它们合并到一个函数中，因为它们在单独的页面上工作（我只是将它们放在一个页面上作为示例）。我也不能改变第一个功能！

如果我使用.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>

【问题讨论】：

你能把你的问题描述清楚一点吗？

标签： javascript jquery ajax function onchange

【解决方案1】：

change 事件需要发生以下三件事：

元素获得焦点
值变化
元素的焦点模糊

如果您以编程方式更改输入的值，则必须通过 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 事件，但这很难看。无论如何，您需要触发 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);
});

【讨论】：

【解决方案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 + '">' : '');
        }
    }
});

【讨论】：

虽然丑陋，但我有同样的想法 +1。
确实很丑。我不喜欢无法在其他地方更改代码的情况。在诉诸于此之前，我会找到一种方法。

【解决方案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），除非用户可以手动输入一个值

【讨论】：