jQuery不触发.change

Question

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

我不能将它们合并成只有一个函数，因为它们在分离的页面上工作（我刚把它们放在一个页面上作为例子）。另外我不能改变第一个功能！

而不是.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. 对焦模糊的元素

如果以编程方式改变输入的值，则必须手动触发通过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

编辑：我也许最初误解你了。你基本上想从你的单选按钮点击事件中调用更改函数。正如你所说，你有这些在单独的页面（不知道为什么），你应该考虑创建一个功能来做更新工作。这样的事情应该帮助...

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），除非是用户可以手动输入一个值

Answer 3

如果你有在第一功能无法控制，则可能需要使用的间隔手动检查输入字段和手动触发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 + '">' : ''); 
     } 
    } 
});