Cách nhận JQuery.trigger ('nhấp'); để bắt đầu nhấp chuột

Tôi đang gặp khó khăn để hiểu cách mô phỏng nhấp chuột bằng JQuery. Ai đó có thể vui lòng thông báo cho tôi như những gì tôi đang làm sai.

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

Bản trình diễn: FIDDLE

Khi tôi nhấp vào nút #foo, tôi muốn mô phỏng một lần nhấp vào #bar tuy nhiên khi tôi thử điều này, không có gì xảy ra. Tôi cũng đã thử jQuery(document).ready(function(){...})nhưng không thành công.

Bạn cần sử dụng jQuery('#bar')[0].click(); để mô phỏng một lần nhấp chuột vào phần tử DOM thực tế (không phải đối tượng jQuery), thay vì sử dụng .trigger()phương thức jQuery.

Lưu ý: DOM Cấp 2 .click()không hoạt động trên một số thành phần trong Safari . Bạn sẽ cần phải sử dụng một cách giải quyết.

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

Bạn chỉ cần đặt một sự kiện thời gian chờ nhỏ trước khi làm .click() như thế này:

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

Đây là hành vi của JQuery. Tôi không chắc tại sao nó hoạt động theo cách này, nó chỉ kích hoạt chức năng onClick trên liên kết.

Thử:

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

Xem bản demo của tôi: 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!
        }
    });
}

Có thể có ích đấy:

Mã gọi Trình kích hoạt sẽ đi sau khi sự kiện được gọi.

Ví dụ: tôi có một số mã mà tôi muốn được thực thi khi giá trị #Exense_tickets bị thay đổi và đồng thời, khi trang được tải lại

$(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');sẽ chỉ gây ra một sự kiện để kích hoạt sự kiện này, nó cũng sẽ không kích hoạt hành động mặc định của trình duyệt.

Bạn có thể mô phỏng chức năng tương tự với JavaScript sau:

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

Hãy thử điều này phù hợp với tôi:

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

Tôi đã thử hai câu trả lời hàng đầu, nó không hiệu quả với tôi cho đến khi tôi xóa "display: none" khỏi các thành phần nhập tệp của mình. Sau đó, tôi trở lại .trigger () nó cũng hoạt động tại safari cho windows.

Vì vậy, kết luận, Không sử dụng hiển thị: không có; để ẩn đầu vào tệp của bạn , bạn có thể sử dụng opacity: 0 thay thế.

Về mặt kỹ thuật không phải là một câu trả lời cho điều này, nhưng sử dụng tốt câu trả lời được chấp nhận ( https://stackoverflow.com/a/20928975/82028 ) để tạo các nút tiếp theo và trước cho các tab trên các trường ACF của jQuery:

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

Chỉ cần sử dụng này:

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

Bạn không thể mô phỏng một sự kiện nhấp chuột bằng javascript. .trigger()Hàm jQuery chỉ kích hoạt một sự kiện có tên là "nhấp chuột" vào phần tử mà bạn có thể chụp bằng .on()phương thức jQuery.