Làm thế nào tôi có thể mô phỏng một nhấp chuột neo thông qua jquery?

Tôi gặp vấn đề với việc giả mạo nhấp chuột neo qua jQuery: Tại sao hộp dày của tôi xuất hiện lần đầu tiên khi tôi nhấp vào nút đầu vào, nhưng không phải lần thứ hai hoặc lần thứ ba?

Đây là mã của tôi:

<input onclick="$('#thickboxId').click();" type="button" value="Click me" />

<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

Nó luôn hoạt động khi tôi nhấp trực tiếp vào liên kết, nhưng không phải nếu tôi cố gắng kích hoạt hộp dày thông qua nút đầu vào. Đây là trong FF. Đối với Chrome, nó dường như hoạt động mọi lúc. Có gợi ý nào không?

Cố gắng tránh nội tuyến các cuộc gọi jQuery của bạn như thế. Đặt thẻ script ở đầu trang để liên kết với clicksự kiện:

<script type="text/javascript">
$(function(){
    $('#thickboxButton').click(function(){
        $('#thickboxId').click();
    });
});
</script>

<input id="thickboxButton" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

Biên tập:

Nếu bạn đang cố gắng mô phỏng người dùng nhấp vào liên kết một cách vật lý, thì tôi không tin điều đó là có thể. Một cách giải quyết khác là cập nhật clicksự kiện của nút để thay đổi window.locationtrong Javascript:

<script type="text/javascript">
$(function(){
    $('#thickboxButton').click(function(){
        window.location = $('#thickboxId').attr('href');
    });
});
</script>

Chỉnh sửa 2:

Bây giờ tôi nhận ra rằng thickbox là một tiện ích UI UI tùy chỉnh, tôi đã tìm thấy các hướng dẫn ở đây :

Hướng dẫn:

• Tạo một phần tử liên kết ( <a href>)

• Cung cấp cho liên kết một thuộc tính lớp với giá trị thickbox ( class="thickbox")

• Trong hrefthuộc tính của liên kết thêm neo sau:#TB_inline

• Trong hrefthuộc tính sau khi #TB_inlinethêm chuỗi truy vấn sau vào neo:

  ? height = 300 & width = 300 & inlineId = myOnPageContent

• Thay đổi các giá trị về chiều cao, chiều rộng và inlineId trong truy vấn tương ứng (inlineID là giá trị ID của phần tử có chứa nội dung bạn muốn hiển thị trong thickBox.

• Theo tùy chọn, bạn có thể thêm modal = true vào chuỗi truy vấn (ví dụ #TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true) để việc đóng một thickBox sẽ yêu cầu gọi tb_remove()hàm từ bên trong thickBox. Xem ví dụ về nội dung phương thức ẩn, trong đó bạn phải bấm có hoặc không để đóng thickBox.

Những gì làm việc cho tôi là:

$('a.mylink')[0].click()

Gần đây tôi đã tìm thấy cách kích hoạt sự kiện nhấp chuột thông qua jQuery.

    <script type="text/javascript">
    var a = $('.path > .to > .element > a')[0];
    var e = document.createEvent('MouseEvents');
    e.initEvent( 'click', true, true );
    a.dispatchEvent(e);
    </script>

Cách tiếp cận này hoạt động trên firefox, chrome và IE. hy vọng nó sẽ giúp được ai đó:

var comp = document.getElementById('yourCompId');
try { //in firefox
    comp.click();
    return;
} catch(ex) {}
try { // in chrome
    if(document.createEvent) {
        var e = document.createEvent('MouseEvents');
        e.initEvent( 'click', true, true );
        comp.dispatchEvent(e);
        return;
    }
} catch(ex) {}
try { // in IE
    if(document.createEventObject) {
         var evObj = document.createEventObject();
         comp.fireEvent("onclick", evObj);
         return;
    }
} catch(ex) {}

Mặc dù đây là câu hỏi rất cũ nhưng tôi thấy có gì đó dễ dàng hơn để xử lý công việc này. Đây là plugin jquery được phát triển bởi nhóm UI jquery gọi là mô phỏng. bạn có thể bao gồm nó sau jquery và sau đó bạn có thể làm một cái gì đó như

<a href="http://stackoverflow.com/"></a>
$('a').simulate('click');

hoạt động tốt trong chrome, firefox, opera và IE10. Bạn có thể tải xuống từ https://github.com/eduardolundgren/jquery-simulation/blob/master/jquery.simulation.js

Tiêu đề câu hỏi cho biết "Làm cách nào tôi có thể mô phỏng một nhấp chuột neo trong jQuery?". Chà, bạn có thể sử dụng các phương thức "trigger" hoặc "triggerHandler", như vậy:

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/thickbox.js"></script>
<script type="text/javascript">
$(function() {
    $('#btn').click(function() {
        $('#thickboxId').triggerHandler('click');
    })
})
</script>
...
<input id="btn" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

Chưa được thử nghiệm, tập lệnh thực tế này, nhưng tôi đã sử dụng triggeret al trước đó và họ đã làm việc rất tốt.

CẬP NHẬT
triggerHandler không thực sự làm những gì OP muốn. Tôi nghĩ rằng 1421968 cung cấp câu trả lời tốt nhất cho câu hỏi này.

Tôi khuyên bạn nên xem API Selenium để xem cách chúng kích hoạt nhấp chuột vào một yếu tố theo cách tương thích với trình duyệt:

• selenium-browserbot.js

Hãy tìm BrowserBot.prototype.triggerMouseEventchức năng.

Tôi tin rằng bạn có thể sử dụng:

$('#yourLink').bind('click', function() {
  //Do something over here
});

$('#yourLink').trigger('click');

Điều này sẽ dễ dàng kích hoạt chức năng nhấp chuột, mà không thực sự nhấp vào nó.

Bạn có cần phải giả mạo một nhấp chuột neo? Từ trang web của hộp dày:

Có thể gọi thickBox từ một thành phần liên kết, thành phần đầu vào (thường là nút) và thành phần khu vực (bản đồ hình ảnh).

Nếu điều đó được chấp nhận, thì nó cũng dễ như đặt lớp hộp dày vào chính đầu vào:

<input id="thickboxButton" type="button" class="thickbox" value="Click me">

Nếu không, tôi khuyên bạn nên sử dụng Fireorms và đặt một điểm dừng trong phương thức onclick của phần tử neo để xem liệu nó chỉ được kích hoạt ở lần nhấp đầu tiên.

Biên tập:

Được rồi, tôi đã phải tự thử nó và đối với tôi khá chính xác mã của bạn đã hoạt động trong cả Chrome và Firefox:

<html>
<head>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
</head>
<body>
<script src="jquery-latest.pack.js" type="text/javascript"></script>
<script src="thickbox.js" type="text/javascript"></script>
<input onclick="$('#thickboxId').click();" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>
</body>
</html>

Cửa sổ bật lên bất kể tôi nhấp vào phần tử đầu vào hay phần tử neo. Nếu đoạn mã trên phù hợp với bạn, tôi đề nghị lỗi của bạn nằm ở chỗ khác và bạn cố gắng cách ly vấn đề.

Một điều khác có thể là chúng tôi đang sử dụng các phiên bản khác nhau của jquery / thickbox. Tôi đang sử dụng những gì tôi nhận được từ trang hộp dày - jquery 1.3.2 và thickbox 3.1.

Bạn có thể tạo một biểu mẫu thông qua jQuery hoặc trong mã trang HTML bằng một hành động bắt chước liên kết của bạn href:

<a id="anchor_link" href="somepath.php">click here</a>.

var link = $('#anchor_link').attr('href');
$('body').append('<form id="new_form" action="'+link+'"></form>');
$('#new_form').submit();

Để mô phỏng một lần nhấp vào một neo trong khi hạ cánh trên một trang, tôi chỉ sử dụng jQuery để tạo hiệu ứng cho thuộc tính scrollTop trong $(document).ready.Không cần kích hoạt phức tạp và nó hoạt động trên IE 6 và mọi trình duyệt khác.

Nếu bạn không cần sử dụng JQuery, như tôi thì không. Tôi đã có vấn đề với chức năng trình duyệt chéo .click(). Vì vậy, tôi sử dụng:

eval(document.getElementById('someid').href)

Trong Javascript bạn có thể làm như thế này

function submitRequest(buttonId) {
    if (document.getElementById(buttonId) == null
            || document.getElementById(buttonId) == undefined) {
        return;
    }
    if (document.getElementById(buttonId).dispatchEvent) {
        var e = document.createEvent("MouseEvents");
        e.initEvent("click", true, true);
        document.getElementById(buttonId).dispatchEvent(e);
    } else {
        document.getElementById(buttonId).click();
    }
}

và bạn có thể sử dụng nó như

submitRequest("target-element-id");

Sử dụng tập lệnh của Jure, tôi đã thực hiện điều này, để dễ dàng "nhấp" nhiều yếu tố như bạn muốn.
Tôi mới sử dụng Google Reader trên 1600 mục và nó hoạt động hoàn hảo (trong Firefox)!

var e = document.createEvent('MouseEvents');
e.initEvent( 'click', true, true );
$(selector).each(function(){this.dispatchEvent(e);});

JQuery('#left').triggerHandler('click');hoạt động tốt trong Firefox và IE7. Tôi chưa thử nó trên các trình duyệt khác.

Nếu muốn kích hoạt nhấp chuột người dùng tự động, hãy làm như sau:

window.setInterval(function() 
    {
        $('#left').triggerHandler('click');
    }, 1000);

Điều này không hoạt động trên trình duyệt gốc Android để nhấp vào "phần tử nhập (tệp) ẩn":

$('a#swaswararedirectlink')[0].click();

Nhưng điều này hoạt động:

$("#input-file").show();
$("#input-file")[0].click();
$("#input-file").hide();

Khi cố gắng mô phỏng 'nhấp chuột' trong các bài kiểm tra đơn vị với trình tạo giao diện người dùng jQuery, tôi không thể có bất kỳ câu trả lời nào trước đây để hoạt động. Cụ thể, tôi đã cố gắng mô phỏng 'spin' khi chọn mũi tên xuống. Tôi đã xem xét các bài kiểm tra đơn vị spinner UI UI và họ sử dụng phương pháp sau, phương pháp này hiệu quả với tôi:

element.spinner( "widget" ).find( ".ui-spinner-up" ).mousedown().mouseup();