jQuery dont trigger .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 + '">' : ''); 
    }); 
}); 

Однако, в тексте вопроса, вы не можете изменить первую функцию, как я предложил. В этом случае нет подходящего варианта для вас, ИМО. Вы можете настроить временной интервал для опроса ввода для его значения и вызвать событие 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

EDIT: Может быть, я неправильно вас изначально. Вы в основном хотите вызвать функцию изменения из вашего события нажатия кнопки переключателя. Как вы сказали, у вас есть это на отдельных страницах (не знаете, почему), вы должны подумать о создании функции для выполнения работы по обновлению. Что-то, как это должно помочь ...

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(); 
    }); 
}); 

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

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 + '">' : ''); 
     } 
    } 
});