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.