アンカー要素内のラジオボタンがjQueryクリックハンドラの後にリセットされます

ラジオタイプの要素が要素に含まれている状況があります。アンカー要素にはhrefがありますが、要素にjQueryの 'クリック'ハンドラを追加することでその動作をオーバーライドしたいと考えています。アンカー要素内のラジオボタンがjQueryクリックハンドラの後にリセットされます

クリックハンドラは、その中のラジオボタンをグループ内で選択します。これはアンカーがクリックされたときにすべて動作しますが、ラジオボタンをクリックすると、jQueryは選択したラジオを以前選択したラジオにリセットします。ここで

が問題を複製簡素化のページです：

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#a1").click(function(event) { 
       anchorClicked("a1"); 
       return false; 
      }); 
      $("#a2").click(function(event) { 
       anchorClicked("a2"); 
       return false; 
      }); 
     }); 

     function anchorClicked(anchorId) { 
      $('#' + anchorId + ' input:radio').attr("checked", true); 
      alert("Look at what is selected and what happens after the event when this dialog is closed!"); 
     } 
    </script> 
</head> 
<body> 
    <form> 
     <ul> 
      <li id="li1"> 
       <a id="a1" href="javascript:alert('default functionality')"> 
        <input value="1" name="rb" type="radio" id="rb1"> 
        <span>Details 1</span> 
       </a> 
      </li> 
      <li id="li2"> 
       <a id="a2" href="javascript:alert('default functionality')"> 
        <input value="2" name="rb" type="radio" id="rb2"> 
        <span>Details 2</span> 
       </a> 
      </li> 
     </ul> 
    </form> 
</body>

誰もが、私はラジオボタンをリセットするためのjQueryのを防ぐことができますどのように任意のアイデアを持っていますか？

出典

2011-01-06 GrievousAngel

私はこの問題を解決するために見つけた最も簡単な方法は、クリックイベント中にアンカー要素からhref属性を削除することです：

$("#a1").click(function(event) { 
    this.removeAttribute("href");    
    anchorClicked("a1"); 
    });

これはI決してデフォルトの動作を防止するためにfalseを返す必要性が長くなり、イベントがDOMを安全にバブルアップし、すべてが機能します。

出典

2011-01-06 16:15:44 GrievousAngel

ちょうどあなたがそれに私を打つことに気づいた。 :)はい、問題はラジオボタンのイベントをキャンセルすることですので、これが機能します。 – Chris

しかし、 'href'属性を持たないアンカーをクリックすることはできません。少なくとも、有効なタグではありません。 –

ブラウザはリンクであることを視覚的に示すものではないかもしれませんが、ポインタを変更するためのhover CSSルールを提供できます。 – GrievousAngel

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("input:radio").click(function(event){event.stopPropagation();}); 

    });

出典

2011-01-06 11:44:21

申し訳ありませんが、これは問題を解決しません。選択されていないラジオボタンをクリックすると、以前に選択されたラジオボタンが選択されたままになります。 – GrievousAngel

私はそれがこのリンクをチェックしていると思っていました--http：//jsfiddle.net/MUgXY/ –

@Jishnuそれであなたは答えがあったことが分かります。 –

これはやや奇妙なやり方です。ラジオボタンを選択しますlabel要素の任意の場所にこのボタンをクリックすることにより

<label><input value="1" name="rb" type="radio" id="rb1" /> Details One</label> 
<label><input value="2" name="rb" type="radio" id="rb2" /> Details Two</label>

：あなたが最初の代わりに、そのようなスパンのlabel要素を使用して後にしている効果を得ることができます。

そこからあなたがしたい場合は、ラジオボタンの変更イベントを監視する必要があります

$('input:radio[name="rb"]').change(function() { 
    if (this.checked) { 
     alert('remember the deselected radio button changes also'); 
    } 
});

出典

2011-01-06 11:47:48

Marcus、私は助けてくれてありがとう。しかし、私はアンカー要素で立ち往生しています。 – GrievousAngel

申し訳ありませんが、私の短いコメントを切った。 htmlはASP.Netアプリケーションによって生成され、アンカーはLinkButtonsからのものです。 [N.B. LinkButtonを他のものに変更することはできません。 – GrievousAngel

問題はありませんが、私はその制限を扱う別の答えを追加しました。 –

$('input:radio').click(function(e) { 
    e.stopPropagation(); 
}); 

$('a[id^="a"]').click(function(e) { 
    $('input:radio:first', this).attr("checked", true); 
    return false; 
});

ラジオボタンがクリックされたときに、重要な部分は、クリックイベントの伝播を停止しています。しかし、あなたがfalseを返すと、ラジオボタンは期待通りに選択されないようです。

次に、文字「a」で始まるidを持つaタグにclickイベントをバインドします。クリックすると、aタグ内の最初のラジオボタン入力が選択され、チェックされます。

DEMO：http://jsfiddle.net/marcuswhybrow/mg66T/2/

出典

2011-01-06 14:16:36

Marcus、質問の中で私のanchorClickedメソッドと同じことをします。問題は、ラジオボタンの1つを選択すると、ラジオボタンをクリックしてラジオボタンを選択することができなくなることです。最初に選択されますが、クリックイベントハンドラが完了すると選択解除されます。 – GrievousAngel

このコードを試しましたか（ 'return false'を追加するように修正しましたか）、ちょっと複雑な設定のためあなたのものがうまくいかないと思っていました。これがうまくいかない理由はありません。 –

@Marcus Whybrow：あなたの前提は間違っていた。あなたの戻り値falseがラジオボタンのアクションをキャンセルして、それが変更されたという事実を変更しているので、動作しませんでした。これを実証するいくつかの例については、私の答えを見てください。 – Chris

問題は、デフォルトのアンカータグの動作をキャンセルする「戻りfalse」は、ラジオボタンのクリックの動作をキャンセルして、クリックの動作に関係なく元の状態に戻すということですイベント。 trueを返すようにfucntionsを設定すると、期待される動作（デフォルトのクリック機能と同様）が示されます。

最後に修正するには、デフォルトのクリックイベントを完全に取り除きたいとします。これを行うには、hrefを "＃"に変更するだけで、実行時にあまり効果がないようにすることができます。この動作の例については、http://jsfiddle.net/FrcRx/1/を参照してください。

href属性を完全に削除するのが最善の方法です。これはもちろん、ほとんどのブラウザではリンクとは見なされないため、リンクのように見えるように適切なスタイルを自分で適用する必要があります。

これは、removeAttr jquery関数とaddClass関数で行われます。ここのデモをご覧ください：http://jsfiddle.net/FrcRx/2/

出典

2011-01-06 16:23:39 Chris

アンカー要素内のラジオボタンがjQueryクリックハンドラの後にリセットされます

答えて

関連する問題