-1

私はこれをjQueryのinnerhtmlで動作させるために髪の毛を引っ張ってきました。使用は推奨されていないと言う人もいますが、ページの小さな部分のためなので、サイトの速度などに影響を与えるとは思いません.

使用しているスニペットは次のとおりです。

$('input[name|="yesno1"]').change(function () {

    if ($(this).val() == 'YES') {
        $("#div1").hide();
        $("#div2").show();

    } else {

        $("#div2").hide();
        $("#div1").show();
    }
});

そしてコード：

function replace3() {
    document.getElementById('number').innerHTML = "<b>3. </b>";
    document.getElementById('question').innerHTML = "<b>Would You Like To Try It? </b>";
    document.getElementById('answer1').innerHTML = "<input type=\"radio\" name=\"yesno1\" id=\"dl\" value=\"YES\" /> Yes";
    document.getElementById('answer2').innerHTML = "<input type=\"radio\" name=\"yesno1\" id=\"dl\" value=\"NO\" /> No";
    document.getElementById('nextbutton').innerHTML = "<div id=\"div1\">Default Link</div> <div id=\"div2\">No Answer Link</div>";    
}

別のリンクでラジオ ボタン YES/NO を設定しようとしています。標準の html ページで上記を使用してみましたが、動作しますが、innerHTMLタグ内で使用すると失敗します。

4

2 に答える 2

1

innerHTML で置き換えられた要素に対してon(jq 1.7+) または(older) でイベント委任を使用するか、それらが置き換えられた後にイベントをバインドしてみてください。liveDOM に存在する前にイベントをバインドしているか、再度置き換えているため、イベントが失われているようです。

 $(document).on('change', 'input[name|="yesno1"]', function() { // Use the common container instead of document.
    if(this.value =='YES') {     
       $("#div1").hide();
       $("#div2").show();       

    } else {

       $("#div2").hide();
       $("#div1").show();
    }
 });

また、おそらくあなたはそれを減らすことができます

$(document).on('change', 'input[name|="yesno1"]', function() { // Use the common container instead of document.

   $("#div1, #div2").toggle(); // provided you show1 and hide one at the startup, with the default radio checked.

 });

jqueryのやり方をしたい場合

function replace3() {
    $('#number').html("<b>3. </b>");
    $('#question').html("<b>Would You Like To Try It? </b>");
   // ....
}

イベント委任

于 2013-06-27T17:52:52.570 に答える
0

オプション:

  1. (推奨)clickそのイベントonを親要素にバインドできます。input親の内部の数に関係なく、clickは常に親にアタッチされており、DRY でパフォーマンスが向上するため、これが最適な方法です。

    $("Parent of input").on('click', 'input[name|="yesno1"]', function(){
    if ($(this).val() == 'YES') {
      $("#div1").hide();
      $("#div2").show();
    } else {
      $("#div2").hide();
      $("#div1").show();
   }
});

  2. $('input[name|="yesno1"]')メソッド内の最後のステートメントとしてセレクターを使用してイベントハンドラーを配置できますreplace3()。その時点で、input要素は DOM にあるため、クリック ハンドラーを要素にバインドできます。

      function replace3() {
      document.getElementById('number').innerHTML = "<b>3. </b>";
      document.getElementById('question').innerHTML = "<b>Would You Like To Try It? </b>";
      document.getElementById('answer1').innerHTML = "<input type=\"radio\" name=\"yesno1\" id=\"dl\" value=\"YES\" /> Yes";
      document.getElementById('answer2').innerHTML = "<input type=\"radio\" name=\"yesno1\" id=\"dl\" value=\"NO\" /> No";
      document.getElementById('nextbutton').innerHTML = "<div id=\"div1\">Default Link</div> <div id=\"div2\">No Answer Link</div>";    

      //your change event here
      $('input[name|="yesno1"]').change(function () {
         if ($(this).val() == 'YES') {
          $("#div1").hide();
          $("#div2").show();
         } else {
          $("#div2").hide();
          $("#div1").show();
         }
      });    
 }

  3. jquery が読み込まれる前であっても、この要素 ( input) を常に存在するオブジェクトにバインドできます。document

    $(document).on('change', 'input[name|="yesno1"]', function() { 
 if(this.value =='YES') {     
   $("#div1").hide();
   $("#div2").show();     
 } else {    
   $("#div2").hide();
   $("#div1").show();
 }
});
于 2013-06-27T18:01:43.077 に答える