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事件需要发生以下三件事：

元素增益焦点
价值变动
焦点模糊元素

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

jQuery不要触发.change

3 个答案: