JQuery.trigger ( 'click')를 얻는 방법; 마우스 클릭을 시작하려면

JQuery를 사용하여 마우스 클릭을 시뮬레이션하는 방법을 이해하는 데 어려움을 겪고 있습니다. 누군가 내가 뭘 잘못하고 있는지 알려주십시오.

HTML :

<a id="bar" href="http://stackoverflow.com" target="_blank">Don't click me!</a>
<span id="foo">Click me!</span>

jQuery :

jQuery('#foo').on('click', function(){
    jQuery('#bar').trigger('click');
});

데모 : FIDDLE

#foo 버튼을 클릭하면 #bar의 클릭을 시뮬레이션하고 싶지만 시도하면 아무 일도 일어나지 않습니다. 나도 시도 jQuery(document).ready(function(){...})했지만 성공하지 못했습니다.

jQuery 메소드 를 사용하는 대신 jQuery('#bar')[0].click(); 실제 DOM 요소 (jQuery 객체가 아님) 에 대한 마우스 클릭을 시뮬레이션하는 데 사용해야 합니다.trigger() .

참고 : DOM 레벨 2 .click()는 Safari의 일부 요소에서 작동하지 않습니다 . 해결 방법을 사용해야합니다.

http://api.jquery.com/click/

다음 .click() 과 같이 하기 전에 작은 시간 초과 이벤트를 넣어야합니다 .

setTimeout(function(){ $('#btn').click()}, 100);

이것이 JQuery 동작입니다. 왜 이런 식으로 작동하는지 잘 모르겠습니다. 링크에서 onClick 기능 만 트리거합니다.

시험:

jQuery(document).ready(function() {
    jQuery('#foo').on('click', function() {
        jQuery('#bar')[0].click();
    });
});

내 데모보기 : http://jsfiddle.net/8AVau/1/

jQuery(document).ready(function(){
    jQuery('#foo').on('click', function(){
         jQuery('#bar').simulateClick('click');
    });
});

jQuery.fn.simulateClick = function() {
    return this.each(function() {
        if('createEvent' in document) {
            var doc = this.ownerDocument,
                evt = doc.createEvent('MouseEvents');
            evt.initMouseEvent('click', true, true, doc.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
            this.dispatchEvent(evt);
        } else {
            this.click(); // IE Boss!
        }
    });
}

유용 할 수 있습니다 :

트리거를 호출하는 코드 는 이벤트가 호출 된 후에 가야 합니다.

예를 들어 #expense_tickets 값이 변경되고 페이지가 다시로드 될 때 실행하려는 코드가 있습니다.

$(function() { 

  $("#expense_tickets").change(function() {
    // code that I want to be executed when #expense_tickets value is changed, and also, when page is reload
  });

  // now we trigger the change event
  $("#expense_tickets").trigger("change");

})

jQuery는 .trigger('click');이 이벤트에서만 이벤트를 트리거하며 기본 브라우저 동작도 트리거하지 않습니다.

다음 JavaScript를 사용하여 동일한 기능을 시뮬레이션 할 수 있습니다.

jQuery('#foo').on('click', function(){
    var bar = jQuery('#bar');
    var href = bar.attr('href');
    if(bar.attr("target") === "_blank")
    {
        window.open(href);
    }else{
        window.location = href;
    }
});

나를 위해 작동하는 이것을 시도하십시오 :

$('#bar').mousedown();

상위 2 개의 답변을 시도했지만 파일 입력 요소에서 "display : none"을 제거 할 때까지 작동하지 않습니다. 그런 다음 .trigger ()로 되돌아 갔으며 Windows 용 사파리에서도 작동했습니다.

결론적으로 display : none을 사용하지 마십시오. 파일 입력을 숨기려면 opacity : 0을 대신 사용할 수 있습니다.

기술적으로 이에 대한 답변은 아니지만 jQuery ACF 필드의 탭에 대한 다음 및 이전 버튼을 만들기 위해 허용 된 답변 ( https : //.com/a/20928975/82028 )을 잘 사용 하십시오 .

$('.next').click(function () {
    $('#primary li.active').next().find('.acf-tab-button')[0].click();
});

$('.prev').click(function () {
    $('#primary li.active').prev().find('.acf-tab-button')[0].click();
});

이것을 사용하십시오 :

$(function() {
 $('#watchButton').click();
});

자바 스크립트로 클릭 이벤트를 시뮬레이션 할 수 없습니다. jQuery .trigger()함수는 요소에서 "click"이라는 이벤트 만 발생 시키며 .on()jQuery 메소드로 캡처 할 수 있습니다 .