Bir olay işleyicisini bağlama veya bağlama ile bağlamadıysam, bir <a> bağlantısını takip etmek için jquery click () yöntemini çağırabilir miyim?


175

JavaScript'imde, zaman geçtikten sonra başka bir sayfaya gitmek için bir bağlantıyı tıklayarak taklit edilmesi gereken bir zamanlayıcı var. Bunu yapmak için jQuery click()işlevini kullanıyorum . Kullandım $().trigger()ve window.locationayrıca, üçünün de amaçladığı gibi çalışmasını sağlayabilirim.

Bazı garip davranışlar gözlemledim click()ve ne olduğunu ve nedenini anlamaya çalışıyorum.

Bu soruda anlattığım her şey için Firefox kullanıyorum, ancak diğer tarayıcıların bununla ne yapacağıyla da ilgileniyorum.

Bir olay işleyicisi kullanmamış $('a').bind('click',fn)veya $('a').click(fn)ayarlamamış olsaydım , arama $('a').click()hiç bir şey yapmaz gibi görünüyor. Tarayıcı yeni sayfayı yüklemediğinden, bu olay için tarayıcının varsayılan işleyicisini çağırmaz.

Ancak, önce bir olay işleyicisi ayarlarsam, olay işleyicisi hiçbir şey yapmasa bile beklendiği gibi çalışır.

$('a').click(function(){return true;}).click();

Bu, yeni sayfayı kendim tıklamış gibi yükler.

Yani sorum iki yönlü: Bir yerde yanlış bir şey yaptığım için bu garip davranış mı? ve click()kendim bir işleyici oluşturmamışsam neden arama varsayılan davranışla hiçbir şey yapmıyor?

DÜZENLE:

Hoffman sonuçlarımı çoğaltmaya çalıştığında belirlediği gibi, yukarıda tarif ettiğim sonuç aslında gerçekleşmiyor. Dün gözlemlediğim olaylara neyin sebep olduğundan emin değilim, ancak bugün soruda anlattığım şeyin olmadığından eminim.

Dolayısıyla yanıt, tarayıcıda "sahte" tıklamalar yapamayacağınız ve tüm jQuery'nin gerçekleştirdiği etkinlik işleyicinizi çağırmaktır. window.locationSayfayı değiştirmek için hala kullanabilirsiniz ve bu benim için iyi çalışıyor.


Yanıtlar:


90

İlginç, bu muhtemelen jQuery için bir "özellik isteği" (yani hata). JQuery click olayı, öğeye bir jQuery olayı bağlarsanız öğedeki yalnızca tıklama eylemini (DOM'da onClick olayı olarak adlandırılır) tetikler. JQuery posta listelerine ( http://forum.jquery.com/ ) gitmeli ve bunu bildirmelisiniz. Bu istenen davranış olabilir, ama sanmıyorum.

DÜZENLE:

Bazı testler yaptım ve söyledikleriniz yanlış, bir işlevi bir 'a' etiketine bağlasanız bile sizi hala href özelliği tarafından belirtilen web sitesine götürmez. Aşağıdaki kodu deneyin:

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
 <script>
  $(document).ready(function() {
   /* Try to dis-comment this:
   $('#a').click(function () {
    alert('jQuery.click()');
    return true;
   });
   */
  });
  function button_onClick() {
   $('#a').click();
  }
  function a_onClick() {
   alert('a_onClick');
  }
 </script>

</head>
<body>
 <input type="button" onclick="button_onClick()">
 <br>
 <a id='a' href='http://www.google.com' onClick="a_onClick()"> aaa </a>

</body>
</html> 

Doğrudan bağlantıyı tıklamadığınız sürece (yorumlanan kodla veya yorumsuz) google.com'a gitmez. Ayrıca, tıklama etkinliğini bağlantıya bağlasanız bile, düğmeyi tıkladıktan sonra hala mor renkte olmayacağını unutmayın. Yalnızca bağlantıyı doğrudan tıklarsanız mor renkte yanar.

Biraz araştırma yaptım ve tarayıcı javascript ile "sahte tıklama" desteklemediği için .click 'a' etiketleri ile çalışmak için varsayalım gibi görünüyor. Yani, javascript ile bir öğeyi "tıklayamazsınız". 'A' etiketleri ile onClick etkinliğini tetikleyebilirsiniz, ancak bağlantı renkleri değiştirmez (ziyaret edilen bağlantı rengine, varsayılan çoğu tarayıcıda mor renktedir). Bu nedenle, href özelliğine gitme eylemi onClick etkinliğinin bir parçası olmadığı, ancak tarayıcıda sabit kodlandığı için $ (). Click etkinliğinin 'a' etiketleriyle çalışmasını sağlamak anlamlı olmaz.


7
Kodunuzu denedim ve tam olarak söylediğiniz gibi yapar, ancak kodum yukarıda açıklandığı gibi yapar. Biraz daha deney yapacağım ve deneyimlerimin basit bir örneğini bir araya getirip getiremeyeceğimi göreceğim.
Mnebuerquo

1
Tamam. Yanlış yaptığım bir şey olmalı. Sorumun çalıştığından emin olduğumda kesinlikle emindim, ancak örnek madenimi denediğimden beri artık çalışmıyor. Sayfayı değiştirmek ve tıklamayı taklit etmemek için window.location komutunu kullanmaya geri döneceğim.
Mnebuerquo

Gerçekten de, click (), sahte tıklamalar oluşturmak için değildir, ancak bazen javascript enjeksiyonlu düğmelere veya formlara tıklamak veya sadece mevcut javascript işlevlerinin üstünde geçici bir kısayol tuşu oluştururken kolaylık sağlamak için kullanabiliriz.
Aero Wang

241

Başka bir seçenek elbette sadece vanilya javascript kullanmaktır:

document.getElementById("a_link").click()

1
Bu Safari'de çalışmaz ve HTML spesifikasyonuna göre sadece girdilerin bunu uygulaması gerekir.
Jeremy Kauffman

4
Dang! Bu işe yarıyor! Ama bir jquery öğesi kullandığından beri oldukça "vanilya" javascript olmadığını söylemeliyim, bu yüzden bir çeşit vanilya jquery javascript .... Firefox 24 ve IE 10'da çalışır.
bgmCoder

@BGM, tamam, ancak click () jquery öğesinde değil. Bunu getElementById ("..") ile değiştirebilirsiniz. Tıklayın ()
Peter

vay yara dolu, beklediğim gibi çalışıyor. +1 verildi :). Diğer kullanıcılar için aşağıdakileri de kullanabilirsiniz: var lnk = document.getElementById ("a_link"); if (lnk == null) {// biraz yapın ....} else {lnk.click (); }
İkbal

Çeşitli tarayıcılarda test edilen IE10 ve Jquery 1.6.4 bunu kaldıramaz.
Hannes Schneidermayer

65

Eğer $.clickfonksiyon koduna bakarsanız , öğenin clickdevam etmeden önce olay için dinleyicileri kayıtlı olup olmadığını kontrol eden bir koşullu ifade vardır . hrefÖzelliği neden bağlantıdan alıp sayfa konumunu el ile değiştirmiyorsunuz?

 window.location.href = $('a').attr('href');

DÜZENLEME: İşte bu nedenle trigger, sürüm 1.3.2 için jQuery kaynağından işlevini tıklamıyor:

 // Handle triggering native .onfoo handlers (and on links since we don't call .click() for links)
    if ( (!elem[type] || (jQuery.nodeName(elem, 'a') && type == "click")) && elem["on"+type] && elem["on"+type].apply( elem, data ) === false )
        event.result = false;

    // Trigger the native events (except for clicks on links)
    if ( !bubbling && elem[type] && !event.isDefaultPrevented() && !(jQuery.nodeName(elem, 'a') && type == "click") ) {
        this.triggered = true;
        try {
            elem[ type ]();
        // prevent IE from throwing an error for some hidden elements
        } catch (e) {}
    }

İşleyicileri çağırdıktan sonra (varsa) jQuery nesnede bir olayı tetikler. Ancak, öğe bir bağlantı değilse yalnızca tıklama olayları için yerel işleyicileri çağırır. Sanırım bu bir nedenden dolayı bilerek yapıldı. Bu, bir olay işleyicinin tanımlanıp tanımlanmamasına rağmen doğru olmalıdır, bu nedenle bir olay işleyicisinin eklenmesinin neden yerel onClickişleyicinin çağrılmasına neden olduğundan emin değilim . Ne yaptığımı yapmalı ve nereye çağırıldığını görmek için infaz adımlarını atmalısınız.


Soruda bahsettiğim gibi window.location ve href'i kesinlikle kullanabilirim. Jquery click () ne olduğunu ve gözlemlediğim sonuçlara ne neden olduğunu anlamaya çalışıyorum.
Mnebuerquo

Cevabımı düzenlediğimde jQuery kaynağında $ .click () bağlantılarıyla bağlantı kuruyor.
Ryan Lynch

2
window.location çalışıyor, ancak HTTP Yönlendiricisi yayınlamıyor ve geri düğmesini kırar.
Chase Seibert

5

Bağlantı etiketlerindeki tıklama işleyicileri jQuery'de özel bir durumdur.

Ben çapa'nın onclick olay (tarayıcı tarafından bilinen) ve DOM'un bağlantı etiketi kavramını saran jQuery nesnesinin click olayı arasında karışıyor olabilir düşünüyorum.

JQuery 1.3.2 kaynağını buradan indirebilirsiniz .

Kaynağın ilgili bölümleri 2643-2645 satırlarıdır (anlaşılmasını kolaylaştırmak için bunu birden çok satıra böldüm):

// Handle triggering native .onfoo handlers (and on links since we don't call .click() for links)
if (
     (!elem[type] || (jQuery.nodeName(elem, 'a') && type == "click")) && 
       elem["on"+type] && 
       elem["on"+type].apply( elem, data ) === false
   )
     event.result = false;

5

JS / jQuery programlı olarak "tıklanan" bağlantıların varsayılan davranışını desteklemez.

Yapabileceğiniz şey bir form oluşturmak ve göndermek. Bu şekilde kullanmak zorunda kalmazsınız window.locationveya window.openbunlar genellikle tarayıcılar tarafından istenmeyen açılır pencereler olarak engellenir.

Bu komut dosyasının 2 farklı yöntemi vardır: biri 3 yeni sekme / pencere açmaya çalışır (IE ve Chrome'da yalnızca 1'i açar, aşağıda daha fazla bilgi) ve bağlantı tıklandığında özel bir etkinlik başlatır.

İşte böyle:

HTML

<html>
<head>
    <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="script.js" type="text/javascript"></script>
</head>
<body>
    <button id="testbtn">Test</button><br><br>

    <a href="https://google.nl">GOOGLE</a><br>
    <a href="http://en.wikipedia.org/wiki/Main_Page">WIKI</a><br>
    <a href="https://stackoverflow.com/">SO</a>
</body>
</html>

jQuery (script.js)

$(function()
{ 
    // Try to open all 3 links by pressing the button
    // - Firefox opens all 3 links
    // - Chrome only opens 1 of them without popup warning
    // - IE only opens 1 of them WITH popup warning
    $("#testbtn").on("click", function()
    {
        $("a").each(function()
        {
            var form = $("<form></form>");
            form.attr(
            {
                id     : "formform",
                action : $(this).attr("href"),
                method : "GET",
                // Open in new window/tab
                target : "_blank"
            });

            $("body").append(form);
            $("#formform").submit();
            $("#formform").remove();
        });
    });

    // Or click the link and fire a custom event 
    // (open your own window without following the link itself)
    $("a").on("click", function()
    {
        var form = $("<form></form>");
        form.attr(
        {
            id     : "formform",
            // The location given in the link itself
            action : $(this).attr("href"), 
            method : "GET",
            // Open in new window/tab
            target : "_blank"              
        });

        $("body").append(form);
        $("#formform").submit();
        $("#formform").remove();

        // Prevent the link from opening normally
        return false;
    });

});

Her bağlantı öğesi için yaptığı şey:

  1. Form oluşturma
  2. Özelliklerini verin
  3. Gönderilebilmesi için DOM'a ekleyin
  4. Teslim et
  5. Tüm izleri kaldırarak formu DOM'dan kaldır * Kötü gülüş ekle *

Artık yeni bir sekme / pencere yüklemeniz var "https://google.nl"(veya istediğiniz herhangi bir URL, değiştirin). Ne yazık ki, bu şekilde birden fazla pencere Popup blockedaçmaya çalıştığınızda, ikincisini açmaya çalışırken bir mesaj çubuğu alırsınız (ilk pencere hala açıktır).


Bu yönteme nasıl ulaştığım hakkında daha fazla bilgiyi burada bulabilirsiniz:

window.openVeya kullanmadan yeni pencere / sekme açmawindow.location.href


3

Jquery .click () öğesini bağlamak istediğiniz öğenin içindeki bir Köprü öğesini tetikleyin

<div class="TopicControl">
    <div class="articleImage">
       <a href=""><img src="" alt=""></a>
    </div>
</div>

Senaryonuzda, tıklama etkinliğinin olmasını istediğiniz ana kaba bağlanırsınız. Ardından, öğeyi (tür, sınıf, kimlik) bulmak ve tıklamayı tetiklemek için standart jquery yöntemini kullanırsınız. Ne olur jquery tıklama başlatmak için özyinelemeli bir işleve girer ve 'e' ve stopPropagation () işlevini alarak özyinelemeli işlevi kırıp jquery'nin bağlantıyı tetiklemek dışında başka bir şey yapmasını istemediğiniz için false değerini döndürürsünüz.

$('.TopicControl').click(function (event) {
         $(this).find('a').click();
        event.stopPropagation();
        return false;
     });

Alternatif çözüm kapları elemanın içine sarmak ve yerine kaplar olarak yerleştirmektir. Görüntüleme bloğundaki açıklıkları w3c standartlarına uyacak şekilde ayarlayın.


3

Bu öğe için jQuery nesnesini seçmek için jQuery kullanabilirsiniz. Ardından, temeldeki DOM öğesini alın ve click()yöntemini çağırın .

id ile

$("#my-link").each(function (index) { $(this).get(0).click() });

veya bir grup bağlantıyı CSS sınıfına tıklamak için jQuery kullanın

$(".my-link-class").each(function (index) { $(this).get(0).click() });

2

Hiçbir şey yapmaz çünkü olaya hiçbir olay bağlı değildir. Doğru hatırlıyorsam, jQuery, performans ve diğer amaçlar için NodeLists'e bağlı kendi olay işleyicileri listesini tutar.


2

Bir vaka için veya çok az kaset için bu özelliğe ihtiyacınız varsa. (tüm uygulama bu özelliği gerektirmiyorsa) jQuery'yi olduğu gibi bırakmayı tercih ederim (birçok nedenden dolayı, daha yeni sürümlere, CDN'ye vb. güncelleme yapmak dahil) ve aşağıdaki geçici çözümlere sahibim:

// For modren Browsers
$(ele).trigger("click");

// Relaying on Paul Irish's conditional class names http://bit.ly/HWIpAp (via HTML5 Boilerplate http://bit.ly/HUzi3I) where each IE version gets a class of its Version
$("html.ie7").length && (function(){
    var eleOnClickattr = $(ele).attr("onclick") 
    eval(eleOnClickattr);
  })()

1

Aynı sekmede köprüyü açmak için şunu kullanın:

$(document).on('click', "a.classname", function() {
    var form = $("<form></form>");
    form.attr(
    {
        id     : "formid",
        action : $(this).attr("href"),
        method : "GET",
    });

    $("body").append(form);
    $("#formid").submit();
    $("#formid").remove();
    return false;
});
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.