Bagaimana saya bisa mensimulasikan klik jangkar melalui jquery?

Saya memiliki masalah dengan memalsukan klik jangkar melalui jQuery: Mengapa kotak tebal saya muncul pertama kali saya mengklik tombol input, tetapi bukan yang kedua atau ketiga kalinya?

Ini kode saya:

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

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

Itu selalu berfungsi ketika saya mengklik langsung pada tautan, tetapi tidak jika saya mencoba mengaktifkan kotak tebal melalui tombol input. Ini dalam FF. Untuk Chrome sepertinya berfungsi setiap saat. Ada petunjuk?

Cobalah untuk menghindari inline panggilan jQuery Anda seperti itu. Letakkan tag skrip di bagian atas halaman untuk mengikat clickacara:

<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>

Edit:

Jika Anda mencoba mensimulasikan pengguna mengklik tautan secara fisik, maka saya tidak percaya itu mungkin. Solusinya adalah memperbarui acara tombol clickuntuk mengubah window.locationdalam Javascript:

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

Edit 2:

Sekarang saya menyadari bahwa Thickbox adalah widget UI jQuery khusus, saya menemukan petunjuk di sini :

Instruksi:

• Buat elemen tautan ( <a href>)

• Berikan tautan atribut kelas dengan nilai thickbox ( class="thickbox")

• Dalam hrefatribut tautan tambahkan jangkar berikut:#TB_inline

• Dalam hrefatribut setelah #TB_inlinemenambahkan string kueri berikut ke jangkar:

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

• Ubah nilai tinggi, lebar, dan inlineId sesuai permintaan (inlineID adalah nilai ID elemen yang berisi konten yang ingin Anda tampilkan di ThickBox.

• Secara opsional Anda dapat menambahkan modal = true ke string kueri (mis #TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true) sehingga menutup ThickBox akan membutuhkan pemanggilan tb_remove()fungsi dari dalam ThickBox. Lihat contoh konten modal tersembunyi, di mana Anda harus mengklik ya atau tidak untuk menutup ThickBox.

Apa yang berhasil untuk saya adalah:

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

Baru-baru ini saya menemukan cara memicu acara klik mouse melalui 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>

pendekatan ini bekerja pada firefox, chrome dan IE. semoga membantu seseorang:

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

Meskipun ini adalah pertanyaan yang sangat lama saya menemukan sesuatu yang lebih mudah untuk menangani tugas ini. Ini adalah plugin jquery yang dikembangkan oleh tim UI jquery yang disebut simulasi. Anda dapat memasukkannya setelah jquery dan kemudian Anda dapat melakukan sesuatu seperti

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

berfungsi dengan baik di chrome, firefox, opera, dan IE10. Anda dapat mengunduhnya dari https://github.com/eduardolundgren/jquery-simulate/blob/master/jquery.simulate.js

Judul pertanyaan mengatakan "Bagaimana saya bisa mensimulasikan klik jangkar di jQuery?". Nah, Anda dapat menggunakan metode "trigger" atau "triggerHandler", seperti:

<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>

Tidak diuji, skrip yang sebenarnya ini, tetapi saya telah menggunakan triggeret al sebelumnya, dan mereka bekerja dengan baik.

UPDATE
triggerHandler tidak benar-benar melakukan apa yang diinginkan OP. Saya pikir 1421968 memberikan jawaban terbaik untuk pertanyaan ini.

Saya sarankan untuk melihat Selenium API untuk melihat bagaimana mereka memicu klik pada elemen dengan cara yang kompatibel dengan browser:

• selenium-browserbot.js

Cari BrowserBot.prototype.triggerMouseEventfungsinya.

Saya yakin Anda bisa menggunakan:

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

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

Ini akan dengan mudah memicu fungsi klik, tanpa benar-benar mengkliknya.

Apakah Anda perlu memalsukan klik jangkar? Dari situs kotak tebal:

ThickBox dapat dipanggil dari elemen tautan, elemen input (biasanya tombol), dan elemen area (peta gambar).

Jika itu dapat diterima, semudah menempatkan kelas kotak tebal pada input itu sendiri:

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

Jika tidak, saya akan merekomendasikan menggunakan Firebug dan menempatkan breakpoint dalam metode onclick elemen anchor untuk melihat apakah itu hanya dipicu pada klik pertama.

Edit:

Oke, saya harus mencobanya sendiri dan bagi saya persis kode Anda berfungsi di Chrome dan 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>

Jendela muncul tidak masalah jika saya mengklik input atau elemen jangkar. Jika kode di atas bekerja untuk Anda, saya sarankan kesalahan Anda terletak di tempat lain dan Anda mencoba untuk mengisolasi masalahnya.

Kemungkinan lain adalah bahwa kita menggunakan versi jquery / thickbox yang berbeda. Saya menggunakan apa yang saya dapatkan dari halaman kotak tebal - jquery 1.3.2 dan kotak tebal 3.1.

Anda dapat membuat formulir melalui jQuery atau dalam kode halaman HTML dengan tindakan yang meniru tautan Anda 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();

Untuk mensimulasikan klik pada jangkar saat mendarat di sebuah halaman, saya hanya menggunakan jQuery untuk menghidupkan properti scrollTop di $(document).ready.Tidak perlu pemicu yang kompleks, dan itu berfungsi pada IE 6 dan setiap browser lainnya.

Jika Anda tidak perlu menggunakan JQuery, seperti saya tidak. Saya punya masalah dengan fungsi lintas browser .click(). Jadi saya menggunakan:

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

Di Javascript Anda bisa melakukan ini

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

dan Anda bisa menggunakannya seperti

submitRequest("target-element-id");

Menggunakan skrip Jure saya membuat ini, untuk dengan mudah "klik" elemen sebanyak yang Anda inginkan.
Saya baru saja menggunakannya Pustaka Google pada 1600+ item dan berfungsi dengan baik (di Firefox)!

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

JQuery('#left').triggerHandler('click');berfungsi dengan baik di Firefox dan IE7. Saya belum mengujinya di browser lain.

Jika ingin memicu klik pengguna otomatis lakukan hal berikut:

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

Ini tidak berfungsi pada browser asli android untuk mengklik "elemen input (file) tersembunyi":

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

Tapi ini berhasil:

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

Dalam mencoba mensimulasikan 'klik' dalam unit test dengan pemintal jQuery UI, saya tidak bisa mendapatkan jawaban sebelumnya untuk bekerja. Secara khusus, saya mencoba mensimulasikan 'putaran' memilih panah bawah. Saya melihat tes unit pemintal jQuery UI dan mereka menggunakan metode berikut, yang bekerja untuk saya:

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