IT

JQuery.trigger ( 'click')를 얻는 방법;

lottoking 2020. 6. 25. 07:45
반응형

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();

I have tried top two answers, it doesn't worked for me until I removed "display:none" from my file input elements. Then I reverted back to .trigger() it also worked at safari for windows.

So conclusion, Don't use display:none; to hide your file input , you may use opacity:0 instead.


Technically not an answer to this, but a good use of the accepted answer (https://stackoverflow.com/a/20928975/82028) to create next and prev buttons for the tabs on jQuery ACF fields:

$('.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();
});

You can't simulate a click event with javascript. jQuery .trigger() function only fires an event named "click" on the element, which you can capture with .on() jQuery method.

참고URL : https://stackoverflow.com/questions/20928915/how-to-get-jquery-triggerclick-to-initiate-a-mouse-click

반응형