วิธีรับ 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!
        }
    });
}

อาจมีประโยชน์:

รหัสที่เรียกใช้ทริกเกอร์ควรไปหลังจากเหตุการณ์ถูกเรียก

ตัวอย่างเช่นฉันมีรหัสบางอย่างที่ฉันต้องการเรียกใช้เมื่อมีการเปลี่ยนแปลงค่า #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();

ฉันได้ลองคำตอบสองอันดับแรกแล้วมันไม่ได้ผลสำหรับฉันจนกว่าฉันจะลบ "display: none" ออกจากองค์ประกอบอินพุตไฟล์ของฉัน จากนั้นฉันเปลี่ยนกลับเป็น. trigger () มันทำงานได้กับซาฟารีสำหรับหน้าต่างด้วย

ดังนั้นข้อสรุปอย่าใช้จอแสดงผล: ไม่มี; เพื่อซ่อนอินพุตไฟล์ของคุณคุณอาจใช้ความทึบ: 0 แทน

ในทางเทคนิคไม่ใช่คำตอบสำหรับเรื่องนี้ แต่ใช้ประโยชน์จากคำตอบที่ยอมรับได้ ( 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();
});

เพียงใช้สิ่งนี้:

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

คุณไม่สามารถจำลองเหตุการณ์การคลิกด้วย javascript .trigger()ฟังก์ชั่นjQuery ยิงเฉพาะเหตุการณ์ที่ชื่อว่า "คลิก" บนองค์ประกอบซึ่งคุณสามารถจับภาพด้วย.on()วิธี jQuery