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

죄송합니다 Jishnu이 문제를 해결하지 않습니다. 선택하지 않은 라디오 버튼을 클릭하면 이전에 선택된 라디오 버튼이 선택된 상태로 유지됩니다. – 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

마커스, 도와 주셔서 감사합니다. 그러나 앵커 요소가 붙어 있습니다. – GrievousAngel

죄송합니다. 내 의견을 짧게 잘라 냈습니다. HTML은 ASP.Net 응용 프로그램에서 생성되며 앵커는 LinkButton에서 가져옵니다. [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 메서드와 동일합니다. 문제는 하나의 라디오 버튼을 선택하면 다른 라디오 버튼을 클릭하여 선택할 수 없다는 것입니다. 처음 선택되지만 클릭 이벤트 핸들러가 완료되면 선택 해제됩니다. – GrievousAngel

이 코드를 사용해 보았습니까 ('return false'를 추가하도록 수정했습니다), 약간 복잡한 설정 때문에 당신의 코드가 작동하지 않는다고 가정했습니다. 이것이 효과가없는 이유는 없습니다. –

@Marcus Whybrow : 당신의 가정은 틀렸다. 반환 false는 라디오 버튼의 동작을 취소하고 변경된 사실을 변경하기 때문에 작동하지 않습니다. 이것을 실제로 보여주는 몇 가지 예를 보려면 제 대답을보십시오. – Chris

기본 앵커 태그 비헤이비어를 취소하는 "return false"또한 라디오 버튼 클릭 동작을 취소하므로 클릭 동작에 관계없이 원래의 상태로 다시 설정됩니다. 행사. true를 반환하도록 함수를 설정하면 기본 클릭 함수뿐만 아니라 예상되는 동작이 나타납니다.

마지막으로 수정하려면 기본 클릭 이벤트를 완전히 제거하고 싶습니다. 이렇게하기 위해 href를 "#"로 변경하면 실행될 때 많은 일을하지 않을 수 있습니다. 이에 대한 예는 http://jsfiddle.net/FrcRx/1/을 참조하십시오.

가장 좋은 방법은 href 속성을 완전히 제거하는 것입니다.물론 이것은 대부분의 브라우저에서 링크로 간주하지 않으므로 적절한 스타일링을 적용하여 링크처럼 보이게해야합니다.

이 작업은 removeAttr jquery 함수와 addClass 함수로 수행됩니다. 여기에 데모보기 : http://jsfiddle.net/FrcRx/2/

출처

2011-01-06 16:23:39 Chris

jQuery 클릭 핸들러 후에 앵커 요소 내부의 라디오 버튼이 재설정됩니다.

답변

관련 문제