同じイベントの2つの別々のハンドラー

Question

'before'セレクターを使って 'label'タグでラジオボタンをスタイリングしています。 私はすべてのブラウザでクリック可能にするためにラベルの 'クリック'イベントを使用しています（クロムは前後の要素をサポートしていません）。 ラジオボタンをクリックしていくつかの要素を表示/非表示にする既存のスクリプトがあります。私はlablesのイベント「クリック」でスクリプトを書いている

をやろうとしている何

。ラベルをクリックしながらラジオのクリックを開始しようとしているため、既存の表示/非表示機能が正しく機能していません。

私は

を必要とする私は、既存のスクリプト（表示/非表示）に影響を与えてはならない、それはすべてのブラウザで動作するスクリプトを記述する必要があります。

私は

1. を行うことができない私は単純にIDを与えることによって、および属性のためにそれを終えることができません。 :(
2. 私は私は私が他の方法で私のラジオを設計するためにHTML/CSSを変更することができます
   1. を行うことができると思う何

   。既存のスクリプトをカスタマイズすることができます。しかし、そこにすることはできません変更を行うには多くの場所がある。:(

3. 「変更」イベントを使用する代わりに、表示/非表示のdivのために「クリック」。

コードサンプルは既存のJSを編集することが許可されていないので

/*what I'm trying...*/ 
 
$(document).ready(function(){ 
 
    $('input[type="radio"]+label').on('click',function(){ 
 
    $(this).prev().click(); 
 
    }); 
 
}); 
 

 
/*existing script*/ 
 
$('input[name="fieldname"]').click(function(){ 
 
    if($('#fieldid').is(':checked')){ 
 
    $('#divid').show(); 
 
    $('#divid1').hide(); 
 
    } else if($('#fieldid1').is(':checked')){ 
 
    $('#divid1').show(); 
 
    $('#divid').hide(); 
 
    } 
 
}); 
 
/*existing script*/

.divs, input[type="radio"]{display:none;} 
 

 
input[type="radio"]+label::before{ 
 
    content:" "; 
 
    display:inline-block; 
 
    position:relative; 
 
    left:0; 
 
    top:0; 
 
    background:red; 
 
    height:10px; 
 
    width:10px; 
 
    border-radius:50%; 
 
} 
 
input[type="radio"]:checked+label::before{ 
 
    background:blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<form> 
 
    <input type="radio" name="fieldname" id="fieldid" class="fieldclass" /> 
 
    <label>show textfield</label> 
 
    <input type="radio" name="fieldname" id="fieldid1" class="fieldclass" /> 
 
    <label>show button</label> 
 
    <div id="divid" class="divs"><input type="text" size="30"></div> 
 
    <div id="divid1" class="divs"><input type="submit" value="button"></div> 
 
</form>

Answer 1

私は解決策を持っていますが、あなたがこれを置くことができるかどうかを確認既存のクリックイベントコードの後。基本的には、既存のクリックイベントのバインドを解除し、別のdocument.readyセグメントに書き直そうとしています。それが可能かどうかを確認してください：

$(document).ready(function(){ 
     // Unbind the existing click event 
     $('input[name="fieldname"]').unbind("click"); 

     // if any label immediately after radio is clicked, call radio's click event 
     $('input[type="radio"]').next('label').on('click',function(){ 
      $(this).prev('input[type="radio"]').click(); 
     }); 

     // radio is clicked 
     // if the label next to radio says show textfield/show button 
     // find the sibling div which has input of type this/that, and show/hide 
     $('input[type="radio"]').on('click',function(){ 
     /*if ($(this).next('label').html().trim().toLowerCase()=='show textfield') { 
      $(this).siblings("div.divs").has('input[type="text"]').show(); 
      $(this).siblings("div.divs").has('input[type="submit"]').hide();   
     } else if ($(this).next('label').html().trim().toLowerCase()=='show button') { 
      $(this).siblings("div.divs").has('input[type="text"]').hide(); 
      $(this).siblings("div.divs").has('input[type="submit"]').show(); 
     }*/ 
     if ($(this).next('label').html().trim().toLowerCase()=='show textfield') { 
      $(this).siblings("div.divs:eq(0)").show(); 
      $(this).siblings("div.divs:eq(1)").hide();  
     } else if ($(this).next('label').html().trim().toLowerCase()=='show button') { 
      $(this).siblings("div.divs:eq(0)").hide(); 
      $(this).siblings("div.divs:eq(1)").show();  
     } 

     }); /* end click */ 
    }); /* end doc.ready */ 

私はこれをFirefoxとChromeでチェックしており、コードは両方で動作しています。

Answer 2

、あなたもそれに追加のJSを追加する必要はありません。

単にあなたのタイトル<span>
にし、あなたの<label>要素に両方<span>と<input>よりもラップ：

/* ABSOLUTELY NO NEED TO ADD ANYTHING */ 
 

 
/*existing script*/ 
 
$('input[name="fieldname"]').click(function(){ 
 
    if($('#fieldid').is(':checked')){ 
 
    $('#divid').show(); 
 
    $('#divid1').hide(); 
 
    } else if($('#fieldid1').is(':checked')){ 
 
    $('#divid1').show(); 
 
    $('#divid').hide(); 
 
    } 
 
}); 
 
/*existing script*/

.divs, input[type="radio"]{display:none;} 
 

 
/* SIMPLY CHANGE `label` to `span` and you're done! */ 
 
input[type="radio"]+span::before{ 
 
    content:" "; 
 
    display:inline-block; 
 
    position:relative; 
 
    left:0; 
 
    top:0; 
 
    background:red; 
 
    height:10px; 
 
    width:10px; 
 
    border-radius:50%; 
 
} 
 
input[type="radio"]:checked+span::before{ 
 
    background:blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- Wrap INPUT and the new SPAN into LABEL --> 
 

 
<form> 
 
    <label> 
 
    <input type="radio" name="fieldname" id="fieldid" class="fieldclass" /> 
 
    <span>show textfield</span> 
 
    </label> 
 
    <label> 
 
    <input type="radio" name="fieldname" id="fieldid1" class="fieldclass" /> 
 
    <span>show button</span> 
 
    </label> 
 
    <div id="divid" class="divs"><input type="text" size="30"></div> 
 
    <div id="divid1" class="divs"><input type="submit" value="button"></div> 
 
</form>