href 요소에서 클릭 이벤트를 트리거하는 방법


80

아래 방법과 같이 jQuery를 사용하여 하이퍼 링크에서 클릭 이벤트를 트리거하려고합니다. 하이퍼 링크에는 ID가 없지만 cssclass가 있습니다.

 $(document).ready(function () {  $('.cssbuttongo').trigger('click'); }); 

위의 기능이 작동하지 않습니다. 이것은 하이퍼 링크입니다

<a href="hyperlinkurl" class="cssbuttongo">hyperlink anchor</a>

1
클래스는 DOM의 여러 요소에 적용될 수 있으므로 클릭을 트리거하는 것은 좋은 생각이 아닙니다.
— Igor Parra 2011

1
NomikOS 당신은 그것에 대해 매우 옳았지만 다른 요소 가이 CSS 클래스를 사용하는지 확인했습니다 :)
— MonsterMMORPG

답변:


78

나는 이것을 증명할 사실적인 증거가 없지만 이미이 문제에 부딪 혔습니다. <a>태그 에서 click () 이벤트를 트리거하는 것이 입력 버튼과 같은 방식으로 작동하지 않는 것 같습니다.

내가 사용한 해결 방법은 브라우저가 다음과 같이 요청 리소스를로드하도록하는 창에 location.href 속성을 설정하는 것입니다.

$(document).ready(function()
{
      var href = $('.cssbuttongo').attr('href');
      window.location.href = href; //causes the browser to refresh and load the requested url
   });
});

편집하다:

나는 js 바이올린을 만들 것이지만 jsfiddle이 iframe을 사용하여 코드를 렌더링하는 방법과 혼합 된 질문의 성격은 그것을 불가능하게 만듭니다.


이것은 정답입니다. 감사합니다 :) href 클릭이 작동하지 않는다는 것을 알았습니다.
— MonsterMMORPG 2011

@MonsterMMorpg 이것이 브라우저가 직접 사용자 작업이라고 믿게 만드는 것은 아닙니다. 따라서 현명하게 사용하십시오 = D
— Matthew Cox

var href = $ ( '. cssbuttongo'). attr ( 'href');
— Luci

7
이것은 링크에도 onclick이벤트 가있을 가능성을 무시합니다 . 그냥 이렇게 $('.cssbuttongo')[0].click()제대로 전체에서 클릭을 시뮬레이션 할 수 있습니다.
— Roman Starkov 2014

실제로 완전한 href에서만 작동합니다. 여기에 코드를 넣을 수 없었기 때문에이 게시물에 대한 내 답변을 읽으십시오.
— Alan Dong

210

네이티브 DOM 메서드는 올바른 일을합니다.

$('.cssbuttongo')[0].click();
                  ^
              Important!

이는 hrefURL, 조각 (예 :) #blah또는 javascript:.

이것은 clickjQuery click메서드 (매우 불완전하고 완전히 무시 함 href) 대신 DOM 메서드를 호출합니다 .


2
@Timwi, 첫 번째 $('.cssbuttongo').click(); // ignores href!는 작동을 보장하지 않을 것이라고 말 하려고했습니다. 인덱스 [0]을 사용하면 jQuery 객체가 브라우저에서 사용하는 것과 똑같은 일반 JS 객체로 만들기 때문에 후자는 항상 작동합니다. @Wei 리우
— 앨런 동

1
대박! 매우 직접적이고 예시적인 답변.
— caiosm1005

11
이것은 선택된 답변이어야합니다. 완벽하게 작동했습니다!
— Amit G

3
@AdilMalik jquery가 click () 메서드가있는 유일한 것이 아니기 때문에 작동합니다. 이 코드는 non-jquery click () 메서드를 호출합니다. 이것은 네이티브 DOM입니다.
— Roman Starkov 2015 년

1
@Timwi 나는 여기에 jsfiddle을 제공합니다 : jsfiddle.net/NabiKAZ/3gv90od5
— Nabi KAZ

31

romkyns의 훌륭한 답변 외에도 .. 관련 문서 / 예제가 있습니다.


DOM 요소 에는 네이티브 .click()메서드가 있습니다.

이 HTMLElement.click()메서드는 요소에 대한 마우스 클릭을 시뮬레이션합니다.

클릭이 사용되면 문서 트리 (또는 이벤트 체인)의 상위 요소로 버블 링되는 요소의 클릭 이벤트도 발생하고 클릭 이벤트도 발생합니다. 그러나 클릭 이벤트의 버블 링으로 인해 <a>실제 마우스 클릭이 수신 된 것처럼 요소가 탐색을 시작 하지 않습니다 . (mdn 참조)

관련 W3 문서 .


몇 가지 예 ..

  • jQuery 객체에서 특정 DOM 요소에 액세스 할 수 있습니다. (예제)

      $('a')[0].click();
    
  • .get()메소드를 사용하여 jQuery 객체에서 DOM 요소를 검색 할 수 있습니다 . (예제)

      $('a').get(0).click();
    
  • 예상대로 DOM 요소를 선택하고 .click()메서드를 호출 할 수 있습니다 . (예)

      document.querySelector('a').click();
    

네이티브 이벤트 를 트리거하는 데 jQuery가 필요 하지 않다는 점을 지적 할 가치가 .click()있습니다.


4

JavaScript를 통해 클릭을 트리거하면 하이퍼 링크가 열리지 않습니다. 이것은 브라우저에 내장 된 보안 조치입니다.

그러나 몇 가지 해결 방법 은 이 질문 을 참조하십시오 .


1
나는 그렇게 생각하지 않는다 .. 왜냐하면 : 나는 이것처럼 작동하는 것을 발견했다 .. 여기 jsfiddle을
— Cody

3
@CodyDmd는 여전히 사용자가 트리거하는 클릭 이벤트입니다. OP의 원래 질문과는 다릅니다.
— Blazemonger 2014-01-05

그것은 그 보인다 @CodyDmd [0]당신의 바이올린 중요하다
— 웨이 리우

3
정확히 어떤 취약점으로부터 보호됩니까?
— Roman Starkov 2014

3
잘 모르겠습니다. Blazemonger, Firefox, Chrome, IE11에서는 다운로드 나 SEO 클릭 사기에 대한 보호가 없기 때문입니다. 즉, 답변의 첫 번째 문장과 두 번째 문장이 모두 거짓 입니다.
— Roman Starkov 2014-06-07

3

여러분들에게 알려 드리고 싶은 대답이 항상 작동하는 것은 아닙니다.

다음은 실패 할 예입니다.

만약 <href='/list'>

href = $('css_selector').attr('href')
"/list"
href = document.querySelector('css_selector').href
"http://localhost/list"

또는 jQuery에서 얻은 href를 여기에 추가 할 수 있습니다.

href = document.URL +$('css_selector').attr('href');

또는 jQuery 방식

href = $('css_selector').prop('href')

마지막으로 브라우저의 현재 페이지 URL을 변경하려면 호출하십시오.

window.location.href = href

또는 사용하여 튀어 나오십시오. window.open(url)

다음 은 JSFiddle의 예입니다.


그래서 당신이 그것을 변경하면 작동하지 않는다고 말하는 것 $('css_selector')[0].click()입니까? 이 JsFiddle 에서 작동합니다 ...
— Roman Starkov 2014-06-07

기록을 위해, 반대표를 던진 것은 내가 아니 었습니다. 여기에 뭔가 있을지도 모르지만 아직 확실하지 않습니다.
— Roman Starkov 2014-06-07

@romkyns, 물론, [0] (순수 JS가 됨)을 사용하여 jQuery 요소에서 추출한 후에 $('.cssbuttongo').click();작동합니다. URL 대신 href 값만 제공하므로 작동하지 않는다고 말하려고합니다. 브라우저가 사용합니다. 오해의 소지가있는 댓글에 대해 죄송합니다.
— Alan Dong

2
@LinDong : 그게 효과가 있다는 것을 알고 있다면 [0].click()왜 대답에 언급되지 않습니까?
— Timwi

location.href는 상대 경로를 허용하므로 using /list은 현재 도메인 앞에 자동으로 추가됩니다. 그래서 작동합니다.
— Tim

-1

링크 대신 버튼을 클릭하는 방법과 비슷한 문제가 발생했습니다. .trigger ( 'click') 또는 [0] .click () 메서드에서는 성공하지 못했고 그 이유를 알지 못했습니다. 마침내 다음이 저에게 효과적이었습니다.

$('#elementid').mousedown();
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.