jQueryはトリガーしません。

私は2つの関数を持っています:最初のものは入力フィールドを更新し、2番目の関数は入力値が有効な画像であれば画像を表示します。

私はそれらを別々のページで作業しているので、それらを1つの関数にマージすることはできません(私は例のために1ページにまとめました)。また、私は最初の機能を変更することはできません!

.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 ? '' : '');
   });
});
</script>

<form>
<input type="radio" name="name" value="http://www.w3schools.com/images/w3schoolslogo.gif" /> IMG
<input type="radio" name="name" value="http://www.google.bg/logos/classicplus.png" /> IMG
<input type="radio" name="name" value="http://www.w3schools.com/images/w3schoolslogo.gif" /> IMG
<input type="radio" name="name" value="http://www.google.bg/logos/classicplus.png" /> IMG
<input type="radio" name="name" value="http://www.w3schools.com/images/w3schoolslogo.gif" /> IMG
</form> <input id="image" type="text" name="fname" /> <div id="imagePreview"> </div>
0
あなたはあなたの問題を少しはっきりと説明できますか?
追加された 著者 Jasper,

3 答え

change イベントでは、次の3つのことが必要です。

  1. 要素利得のフォーカス
  2. 価値の変化
  3. 要素からのぼかしのフォーカス

プログラムの入力値を変更する場合は、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 ? '' : '');
   });
});

しかし、質問文ごとに、私が提案したように最初の機能を変更することはできません。この場合、あなたのために良い選択肢はありません、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 ? '' : '');
  });

  lastVal = $imageInput.val();

  setInterval(function() {
    var currentVal = $imageInput.val();

    if (currentVal !== lastVal) {
      $imageInput.trigger('change');
      lastVal = currentVal;
    }
  }, 500);
});
2
追加された

最初の機能を制御できない場合は、間隔を使って手動で入力フィールドをチェックし、変更を手動で開始する必要があります。これは理想的ではありませんが、それがあなたの唯一の選択肢ならばうまくいくでしょう。

$(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 ? '' : '');
    });
});

Example: 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 ? '' : '');
        }
    }
});
1
追加された
醜いですが、私は同じ考えをしています。
追加された 著者 JAAulde,
本当に醜い。私は他のどこかでコードを変更できない状況が好きではありません。私はこれに頼る前にそれをする方法を見つけるだろう。
追加された 著者 Jeff B,

EDIT: I may have misunderstood you originally. You basically want to call the change function from within your radio button click event. As you said you have these on separate pages (not sure why) you should consider creating a function to do the update work. Something like this should help...

function doProcess(){
   var src = $('#image').val();
   $('#imagePreview').html(src ? '' : '');
}

$(document).ready(function() {
   $("input:radio").click(function() {
      $("#image").val($(this).val());
      doProcess();
   });
});

$(document).ready(function() {
   $('#image').change(function() {
      doProcess();
   });
});

もちろんこれで、ユーザーが手動で値を入力できない限り、2番目の関数(.change)はまったく必要ありません

0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript