programing

JQuery.trigger('클릭')를 가져오는 방법; 마우스를 시작하려면 다음을 클릭합니다.

goodsources 2023. 8. 19. 10:14
반응형

JQuery.trigger('클릭')를 가져오는 방법; 마우스를 시작하려면 다음을 클릭합니다.

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('#bar')[0].click(); 마우스를 시뮬레이션하는 대신 실제 DOM 요소(jQuery 개체가 아님)를 클릭합니다..trigger()jQuery 메서드입니다.

참고: 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!
        }
    });
}

유용할 수 있음:

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

예를 들어, #expens_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's.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();

기술적으로 이에 대한 답변이 아니라 수락된 답변을 잘 사용합니다(https://stackoverflow.com/a/20928975/82028) 에서 jQuery ACF 필드의 탭에 대한 다음 및 이전 단추를 만듭니다.

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

상위 두 개의 답변을 시도했지만 파일 입력 요소에서 "display:none"을 제거하기 전까지는 효과가 없었습니다.그런 다음 다시 .trigger()로 되돌렸습니다. 윈도우용 사파리에서도 작동했습니다.

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

다음을 사용합니다.

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

자바스크립트로는 클릭 이벤트를 시뮬레이션할 수 없습니다.jQuery.trigger()함수는 요소에 대해 "클릭"이라는 이름의 이벤트만 실행하며, 이를 사용하여 캡처할 수 있습니다..on()jQuery 메서드입니다.

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

반응형