jQuery를 사용하여 링크 클릭을 발생시키는 방법

238

링크가 있습니다 :

<ul id="titleee" class="gallery">
  <li>
    <a href="#inline" rel="prettyPhoto">Talent</a>
  </li>
</ul>

그리고 다음을 사용하여 트리거하려고합니다.

$(document).ready(function() {
  $('#titleee').find('a').trigger('click');
});

그러나 작동하지 않습니다.

나는 또한 시도했다 : $('#titleee a').trigger('click');

편집 :

실제로는 여기에서 호출되는 것을 트리거해야합니다 <a href="#inline" rel="prettyPhoto">

jquery  triggers  click 
— 애국 소
소스
7
location.href($('#titleee').find('a').attr("href"));?
— Sylvain
3
또는 심지어 $ ( 'ul.gallery'). find ( 'li> a'). trigger ( 'click');
— CarneyCode
114
여러분 실제 답변은 너무 간단합니다. $('#titleee a')[0].click();. 즉, jQuery 메소드가 아닌 DOM 클릭 메소드를 사용하십시오. 찬성 투표 그레이엄 호치키스 !
— Roman Starkov
5
@romkyns는 새 탭 대신 팝업을 여는 것으로 옳지 않습니다. 그러나이 'a'태그 안에 더미 스팬을 클릭하면 그 목적에 부합합니다
— Shishir Arora
1
앵커에서 이벤트를 트리거하려고하면 가지고있는 코드가 작동합니다. $('ul#titleee li a[href="#inline"]').click();
— Anand Pal

답변:

308

앵커에서 이벤트를 트리거하려고하면 작동하는 코드 가 추가 된 eventHandler 와 함께 jsfiddle 에서 예제를 다시 작성하여 작동하는지 확인할 수 있습니다.

$(document).on("click", "a", function(){
    $(this).text("It works!");
});

$(document).ready(function(){
    $("a").trigger("click");
});

앵커를 클릭하여 사용자가 웹 페이지의 특정 지점으로 이동하도록하려고합니까, 아니면 연결된 이벤트를 트리거하려고합니까? 클릭 이벤트를 실제로 이벤트에 성공적으로 바인딩하지 않았습니까?

또한 이것 :

$('#titleee').find('a').trigger('click');

이것과 같습니다 :

$('#titleee a').trigger('click');

찾기를 호출 할 필요가 없습니다. :)

— 키트 선데
소스
16
@Kit .find ()는 제안하는 것보다 빠른 선택기입니다. 동의하지 않으면 벤치 마크를 수행하지만 제안이 느려집니다. positive :
— :)
14
@mashappslabs-괜찮습니다. 아무리 사실인지에 관계없이 조기 최적화 및 마이크로 최적화가 필요하다고 느끼면 기쁘다. :)
— Kit Sunde
5
@Kit ... 그래서 "찾기를 호출 할 필요가 없습니다"와 같은 문장을 만들 때, 그것은 조기 최적화의 영역에 속하지 않습니까? 나는 그것이 생각하지만 처음에 제안 된 것보다 느리다. 나는 논쟁을 위해 응답하는 것이 아니라 우리 모두가 좋아하는 일을 더 잘하기위한 공동 노력에 대한 것입니다. 나는 이것이 올바르게 나오기를 바란다 :-)
— Ady Ngom
5
@mashappslabs-jsperf.com을 처음 보았을 때 다시 돌아와서 옳다고 생각했는데 일반적인 경우에는 방법이 더 빠릅니다. Opera 만 느립니다. jsperf.com/jquery-selector-perf-right-to-left/32
— Kit Sunde
9
이상하게도 위의 내용은 저에게는 효과가 없지만 @GrahamHotchkiss의 답변은 그렇지 않습니다.
— Oliver
210

죄송하지만 이벤트 핸들러는 실제로 필요하지 않습니다. 당신이 필요로하는 것은 클릭 할 태그 내의 다른 요소입니다.

<a id="test1" href="javascript:alert('test1')">TEST1</a>
<a id="test2" href="javascript:alert('test2')"><span>TEST2</span></a>

jquery :

$('#test1').trigger('click'); // Nothing
$('#test2').find('span').trigger('click'); // Works
$('#test2 span').trigger('click'); // Also Works

이것은 당신이 클릭하는 것에 관한 것이며 태그가 아니라 그 안에있는 것입니다. 불행히도, 베어 텍스트는 JQuery에 의해 인식되지 않는 것 같지만 바닐라 자바 ​​스크립트에 의해 인식됩니다.

document.getElementById('test1').click(); // Works!

또는 jQuery 객체를 배열로 액세스하여

$('#test1')[0].click(); // Works too!!!
— 그레이엄 하치 키스
소스
9
$ ( 'selector') [0] .click ()은 실제로 이벤트 핸들러를 트리거하지 않는 경우를 최소한 하나 이상 처리합니다. 브라우저가 프로토콜 핸들러 링크를 트리거하기위한 실제 클릭으로 인식하도록합니다. 클릭 이벤트에 대한 호출 트리거는 연관된 애플리케이션을 시작하지 않습니다. 답변에 포함 해 주셔서 감사합니다!
— Greg Pettit
3
그래, .click()내가 필요한 것입니다!
— notacouch
3
$ ( '# test2 span'). trigger ( '클릭'); 새 탭에서 URL을 열 수는 있지만 $ ( '# test1') [0] .click (); 팝업 instea를 열고 있었다.
— Shishir Arora 1
배경 요소 클릭을 처리하려고하면 $ ( '# titleee a'). trigger ( 'click'); -> 작동하지 않습니다! $ ( '# titleee a') [0] .click (); -> 작품!
— 18 8
1
$ ( '# test1') [0] .click (); 구세주입니다. 감사합니다
— Amit Bisht
18

이 질문은 Google에서 " <a>요소 클릭 발생 트리거"로 1 위를 차지했으며 실제로 어떻게 응답하는지 언급하지 않으므로 다음과 같이하십시오.

$('#titleee a')[0].click();

설명 : jQuery-object가 아닌click 기본 html 요소에서 를 트리거 합니다 .

천만에요. :)

— 알렉스
소스
2
"jQuery 객체가 아닌 기본 html 요소에 대한 클릭을 트리거합니다." -이것은 나를 위해 클릭 , 감사합니다!
— Fish
5

제공 한 코드를 사용하면 아무 일도 일어나지 않을 수 있습니다. 두 번째 @mashappslabs : 먼저 이벤트 핸들러를 추가하십시오.

$("selector").click(function() {
    console.log("element was clicked"); // or alert("click");
});

그런 다음 이벤트를 시작하십시오.

$("selector").click(); //or
$("selector").trigger("click");

콘솔에 메시지가 나타납니다.

— 줄츠
소스
5
이것은 나를 위해 작동하지 않습니다 : 선택기가 "a"(링크의 HTML 태그, 명확하게하기 위해)이면 익명 함수가 호출 할 때 호출 trigger되지만 태그의 동작은 발생하지 않습니다. 이벤트가 관련 DOM 요소로 전파되지 않는 것과 같습니다. @GrahamHotchkiss의 대답은 나를 위해 안정적으로 작동하는 유일한 것입니다.
— Oliver
5

앵커에서 이벤트를 트리거하려고하면 가지고있는 코드가 작동합니다.

$(document).ready(function() {
  $('a#titleee').trigger('click');
});

또는

$(document).ready(function() {
  $('#titleee li a[href="#inline"]').click();
});

또는

$(document).ready(function() {
  $('ul#titleee li a[href="#inline"]').click();
});
— 아난드 팔
소스
3

클릭 이벤트를 먼저 설정해야 트리거를 발생시킬 수 있습니다.

//good habits first let's cache our selector
var $myLink = $('#titleee').find('a');
$myLink.click(function (evt) {
  evt.preventDefault();
  alert($(this).attr('href'));
});

// now the manual trigger
$myLink.trigger('click');
— 에디 응옴
소스
3

이것은 이벤트를 트리거하는 방법입니다

<!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("input").select(function(){
            $("input").after(" Text marked!");
        });
        $("button").click(function(){
            $("input").trigger("select");
        });
    });
    </script>
    </head>
    <body>

    <input type="text" value="Hello World"><br><br>

    <button>Trigger the select event for the input field</button>

    </body>
    </html>
— 하르 샤드 히라 파라
소스
3

링크의 경우 다음과 같이 작동합니다.

eval($(selector).attr('href'));
— 아민
소스
2

이것은 귀하의 질문에 정확하게 대답하지는 않지만 두통이 적은 동일한 결과를 얻을 수 있습니다.

항상 클릭 이벤트 호출 메소드를 사용하여 실행하려는 모든 로직을 포함합니다. 실제 클릭없이 작업을 수행하려는 경우 메소드를 직접 호출 할 수 있습니다.

— 매튜 바인스
소스
2

요소의 고유 .click()메소드를 호출 하거나 createEventAPI를 사용해야합니다 .

자세한 내용은 https://learn.jquery.com/events/triggering-event-handlers/를 참조하십시오.

— 조지 필리파 키스
소스
6
스택 오버플로에 오신 것을 환영합니다! 이것이 문제를 해결하기위한 귀중한 힌트 일 수도 있지만, 좋은 대답도 해결책을 보여줍니다. 의미를 나타내는 예제 코드를 제공하도록 편집 하십시오 . 또는 이것을 주석으로 작성해보십시오.
— Toby Speight
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.