अगर मैं किसी इवेंट हैंडलर को बाइंड के साथ बाध्य नहीं करता या पहले से ही क्लिक नहीं करता, तो क्या मैं jQuery क्लिक () का अनुसरण कर सकता हूं?

175

मेरे जावास्क्रिप्ट में एक टाइमर है जिसे समय बीतने के बाद दूसरे पृष्ठ पर जाने के लिए लिंक पर क्लिक करने की आवश्यकता होती है। ऐसा करने के लिए मैं jQuery के click()फ़ंक्शन का उपयोग कर रहा हूं । मैंने उपयोग किया है $().trigger()और window.locationयह भी, और मैं इसे तीनों के साथ काम कर सकता हूं।

मैंने कुछ अजीब व्यवहार देखे हैं click()और मैं यह समझने की कोशिश कर रहा हूं कि क्या होता है और क्यों होता है।

मैं इस प्रश्न में वर्णित सब कुछ के लिए फ़ायरफ़ॉक्स का उपयोग कर रहा हूं, लेकिन मुझे इस बात में भी दिलचस्पी है कि अन्य ब्राउज़र इसके साथ क्या करेंगे।

अगर मैंने इवेंट हैंडलर का उपयोग $('a').bind('click',fn)या $('a').click(fn)सेट नहीं किया है , तो कॉलिंग $('a').click()कुछ भी नहीं कर रही है। यह इस घटना के लिए ब्राउज़र के डिफ़ॉल्ट हैंडलर को कॉल नहीं करता है, क्योंकि ब्राउज़र नए पेज को लोड नहीं करता है।

हालांकि, अगर मैं पहले एक इवेंट हैंडलर सेट करता हूं, तो यह उम्मीद के मुताबिक काम करता है, भले ही इवेंट हैंडलर कुछ भी न करे।

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

यह नया पृष्ठ लोड करता है जैसे कि मैंने स्वयं क्लिक किया था।

तो मेरा सवाल दुगना है: क्या यह अजीब व्यवहार है क्योंकि मैं कहीं गलत कर रहा हूं? और click()अगर मैं स्वयं का हैंडलर नहीं बना रहा हूं तो डिफ़ॉल्ट व्यवहार के साथ कॉलिंग कुछ भी क्यों नहीं करता है ?

संपादित करें:

जब हॉफमैन ने निर्धारित किया कि जब उन्होंने मेरे परिणामों की नकल करने की कोशिश की, तो मैंने जो परिणाम ऊपर वर्णित किया वह वास्तव में नहीं होता है। मुझे यकीन नहीं है कि कल मैंने जो घटनाएँ देखीं, उनका क्या कारण था, लेकिन मैं आज निश्चित हूँ कि यह वह नहीं था जो मैंने प्रश्न में वर्णित किया था।

तो इसका उत्तर यह है कि आप ब्राउज़र में "नकली" क्लिक नहीं कर सकते हैं और यह सब jQuery करता है जिसे आपके ईवेंट हैंडलर कहते हैं। आप अभी भी window.locationपृष्ठ बदलने के लिए उपयोग कर सकते हैं , और यह मेरे लिए ठीक काम करता है।

— Mnebuerquo
स्रोत

2

एक समाधान हो सकता है: stackoverflow.com/questions/31687759/…

— Sukrit Chhabra

90

दिलचस्प है, यह संभवतः jQuery के लिए एक "सुविधा अनुरोध" (यानी बग) है। JQuery क्लिक ईवेंट केवल क्लिक एक्शन को ट्रिगर करता है (तत्व पर ऑनक्लिक घटना कहा जाता है) यदि आप एलिमेंट पर jQuery इवेंट को बाइंड करते हैं। आपको jQuery मेलिंग सूचियों ( http://forum.jquery.com/ ) पर जाना चाहिए और इसे रिपोर्ट करना चाहिए । यह वांछित व्यवहार हो सकता है, लेकिन मुझे ऐसा नहीं लगता।

संपादित करें:

मैंने कुछ परीक्षण किया और जो आपने कहा वह गलत है, भले ही आप किसी फ़ंक्शन को 'ए' टैग से बांधते हों, यह अभी भी आपको href विशेषता द्वारा निर्दिष्ट वेबसाइट पर नहीं ले जाता है। निम्नलिखित कोड का प्रयास करें:

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

यह कभी भी google.com पर नहीं जाता है जब तक आप सीधे लिंक पर (टिप्पणी कोड के साथ या बिना) क्लिक नहीं करते हैं। यह भी ध्यान दें कि यदि आप लिंक पर क्लिक करने पर भी ईवेंट को बाँधते हैं, तो बटन क्लिक करने के बाद भी यह बैंगनी नहीं जाता है। यदि आप सीधे लिंक पर क्लिक करते हैं तो यह केवल बैंगनी हो जाता है।

मैंने कुछ शोध किया और ऐसा लगता है कि .click को 'ए' टैग के साथ काम करने के लिए नहीं माना जाता है क्योंकि ब्राउज़र जावास्क्रिप्ट के साथ "नकली क्लिकिंग" को सुपरपोर्ट नहीं करता है। मेरा मतलब है, आप जावास्क्रिप्ट के साथ एक तत्व "क्लिक" नहीं कर सकते। 'ए' टैग्स से आप इसके ऑनक्लिक इवेंट को ट्रिगर कर सकते हैं, लेकिन लिंक रंग नहीं बदलेगा (विज़िट किए गए लिंक रंग में, डिफ़ॉल्ट अधिकांश ब्राउज़रों में बैंगनी है)। तो यह $ बनाने के लिए समझ में नहीं आएगा () क्लिक करें 'ए' टैग के साथ ईवेंट काम पर क्लिक करें क्योंकि href विशेषता पर जाने का कार्य ऑनक्लिक इवेंट का हिस्सा नहीं है, लेकिन ब्राउज़र में हार्डकोड है।

— हॉफमन
स्रोत

7

मैंने आपके कोड की कोशिश की, और जैसा आपने कहा था वैसा ही करता है, लेकिन मेरा कोड जैसा मैंने ऊपर बताया है वैसा ही करता है। मैं कुछ और प्रयोग करूंगा और देखूंगा कि क्या मैं अपने परिणामों का एक सरल उदाहरण एक साथ रख सकता हूं या नहीं।

— Mnebuerquo

1

ठीक। यह कुछ ऐसा रहा होगा जो मैंने गलत किया। मैं उस समय बिल्कुल निश्चित था जब मैंने अपना प्रश्न पोस्ट किया था कि यह काम कर रहा था, लेकिन जब से मैंने आपके उदाहरण की कोशिश की मेरा अब काम नहीं करता है। मैं सिर्फ पृष्ठ बदलने के लिए window.location का उपयोग करके वापस जाऊंगा और क्लिक को विफल करने का प्रयास नहीं करूंगा।

— Mnebuerquo

दरअसल, क्लिक () नकली क्लिक बनाने के लिए नहीं है, लेकिन कभी-कभी हम इसका उपयोग जावास्क्रिप्ट इंजेक्शन के साथ बटन या फॉर्म पर क्लिक करने के लिए या केवल मौजूदा जावास्क्रिप्ट कार्यों के शीर्ष पर एक अस्थायी हॉटकी बनाने के दौरान कर सकते हैं।

— एयरो वांग

241

एक अन्य विकल्प केवल वैनिला जावास्क्रिप्ट का उपयोग करने के लिए है:

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

— पीटर
स्रोत

1

यह सफारी में काम नहीं करता है, और HTML कल्पना के अनुसार केवल इनपुट को इसे लागू करने की आवश्यकता है।

— जेरेमी कॉफ़मैन

4

डांग! यह काम करता है! लेकिन मुझे कहना होगा कि यह काफी "वैनिला" जावास्क्रिप्ट नहीं है क्योंकि यह एक jquery तत्व का उपयोग कर रहा है, इसलिए यह सॉर्ट-ऑफ-वैनिला jquery जावास्क्रिप्ट है .... यह फ़ायरफ़ॉक्स 24 और IE 10. में काम करता है

— bgmCoder 28

@BGM, ठीक है, लेकिन क्लिक () एक jquery तत्व पर नहीं है। आप इसे getElementById ("..") से बदल सकते हैं। क्लिक करें ()

— पीटर

वाह घाव भरा, जैसा मैं उम्मीद करता था, काम करता है। +1 दिया :)। अन्य उपयोगकर्ताओं के लिए, आप भी उपयोग कर सकते हैं जैसे: var lnk = document.getElementById ("a_link"); if (lnk == null) {// do some ....} और {lnk.click (); }

— इकबाल

विभिन्न ब्राउज़रों में परीक्षण किया गया, IE10 और Jquery 1.6.4 इसे संभाल नहीं सकते।

— हनीस श्नाइडरमेयर

65

यदि आप $.clickफ़ंक्शन के कोड को देखते हैं तो मैं शर्त लगाऊंगा कि एक सशर्त विवरण है जो यह देखने के लिए जांचता है कि क्या तत्व के श्रोताओं ने clickघटना के लिए पंजीकृत किया है इससे पहले कि वह आगे बढ़े। केवल hrefलिंक से विशेषता क्यों न प्राप्त करें और मैन्युअल रूप से पृष्ठ स्थान को बदल दें?

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

संपादित करें: यहाँ है कि यह कार्य क्यों नहीं क्लिक triggerकरता है, संस्करण 1.3.2 के लिए jQuery स्रोत:

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

इसके बाद हैंडलर कहते हैं (यदि कोई हो) jQuery वस्तु पर एक घटना को ट्रिगर करता है। हालांकि यह केवल क्लिकथ्रू के लिए देशी हैंडलर को बुलाता है यदि तत्व लिंक नहीं है। मुझे लगता है कि यह किसी कारण के लिए उद्देश्यपूर्ण तरीके से किया गया था। हालांकि यह सच होना चाहिए कि क्या कोई ईवेंट हैंडलर परिभाषित है या नहीं, इसलिए मुझे यकीन नहीं है कि आपके मामले में एक ईवेंट हैंडलर अटैच करने के कारण देशी onClickहैंडलर को बुलाया जा सकता है। आपको वह करना होगा जो मैंने किया था और निष्पादन के माध्यम से यह देखने के लिए कदम उठाएगा कि इसे कहाँ बुलाया जा रहा है।

— रयान लिंच
स्रोत

मैं निश्चित रूप से window.location और href का उपयोग कर सकता हूं जैसा कि मैंने प्रश्न में उल्लेख किया है। मैं यह समझने की कोशिश कर रहा हूं कि jquery क्लिक में क्या होता है (), और मैंने जो परिणाम देखे, उनका क्या कारण है।

— Mnebuerquo

मैंने अपने उत्तर को यह दिखाने के लिए संपादित किया कि jQuery स्रोत में यह लिंक पर $ .click () कॉल से संबंधित है।

— रयान लिंच

2

window.location काम करता है, लेकिन HTTP रेफेरर पोस्ट नहीं करता है, और बैक बटन को तोड़ता है।

— सीज़ेरट

5

लंगर टैग पर हैंडलर क्लिक करें jQuery में एक विशेष मामला है।

मुझे लगता है कि आप एंकर के ऑनक्लिक इवेंट (ब्राउज़र द्वारा ज्ञात) और jQuery ऑब्जेक्ट के क्लिक इवेंट के बीच भ्रमित हो रहे होंगे जो एंकर टैग की DOM की धारणा को लपेटता है।

आप यहां jQuery 1.3.2 स्रोत डाउनलोड कर सकते हैं ।

स्रोत के संबंधित खंड 2643-2645 हैं (मैंने इसे समझने के लिए आसान बनाने के लिए इसे कई लाइनों में विभाजित किया है):

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

— marshally
स्रोत

5

जेएस / jQuery के प्रोग्राम "क्लिक" के डिफ़ॉल्ट व्यवहार का समर्थन नहीं करता है।

आप जो कर सकते हैं, वह एक फॉर्म बनाएं और सबमिट करें। इस तरह से आपको उपयोग करने की आवश्यकता नहीं है window.locationया window.open, जिन्हें अक्सर ब्राउज़रों द्वारा अवांछित पॉपअप के रूप में अवरुद्ध किया जाता है।

इस स्क्रिप्ट के 2 अलग-अलग तरीके हैं: एक जो 3 नए टैब / विंडो खोलने की कोशिश करता है (यह IE और क्रोम में केवल 1 खोलता है, नीचे अधिक जानकारी) और एक जो लिंक क्लिक पर एक कस्टम ईवेंट को फायर करता है।

यहां कैसे:

एचटीएमएल

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

});

यह प्रत्येक लिंक तत्व के लिए क्या करता है:

एक फॉर्म बनाएँ
इसकी विशेषताएँ दीजिए
इसे DOM में जोड़ें ताकि इसे सबमिट किया जा सके
इसे भेजें
डोम से फॉर्म निकालें, सभी निशान को हटाएं * बुराई हंसी डालें *

अब आपके पास एक नया टैब / विंडो लोड हो रहा है "https://google.nl"(या कोई भी URL जो आप चाहते हैं, बस इसे बदलें)। दुर्भाग्य से जब आप इस तरह से एक से अधिक विंडो खोलने का प्रयास करते हैं, तो आपको Popup blockedदूसरा एक खोलने का प्रयास करते समय एक मैसेजबार मिलता है (पहला वाला अभी भी खुला हुआ है)।

मुझे इस विधि के बारे में अधिक जानकारी यहाँ मिली है:

उपयोग किए बिना window.openया बिना नई विंडो / टैब खोलनाwindow.location.href

— रिचर्ड डे विट
स्रोत

3

ट्रिगर हाइपरलिंक तत्व जो उस तत्व के अंदर होता है जिसे आप jquery पर हुक करना चाहते हैं। क्लिक करें ()

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

अपनी स्क्रिप्ट में आप मुख्य कंटेनर को हुकअप करते हैं, जिस पर आप क्लिक इवेंट चाहते हैं। फिर आप तत्व (प्रकार, वर्ग, आईडी) को खोजने के लिए मानक jquery कार्यप्रणाली का उपयोग करते हैं और क्लिक पर आग लगाते हैं। क्या होता है jquery क्लिक को आग देने के लिए एक पुनरावर्ती कार्य में प्रवेश करता है और आप घटना 'e' को रोककर पुनरावर्ती कार्य को तोड़ते हैं और रोकें () फ़ंक्शन को रोकते हैं और झूठे लौटते हैं क्योंकि आप नहीं चाहते कि jquery कुछ और भी करें - लिंक को लिंक करें।

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

वैकल्पिक समाधान तत्व में कंटेनरों को लपेटना है और कंटेनर के रूप में अंदर की जगह है। W3c मानकों के अनुरूप ब्लॉक प्रदर्शित करने के लिए स्पैन सेट करें।

— पॉल स्टाइल्स
स्रोत

3

आप उस तत्व के लिए jQuery ऑब्जेक्ट का चयन करने के लिए jQuery का उपयोग कर सकते हैं। फिर, अंतर्निहित DOM तत्व प्राप्त करें और इसकी click()विधि को कॉल करें ।

आईडी से

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

या सीएसएस वर्ग द्वारा लिंक का एक गुच्छा क्लिक करने के लिए jQuery का उपयोग करें

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

— 10GritSandpaper
स्रोत

2

यह कुछ भी नहीं करता है क्योंकि कोई घटना घटना के लिए बाध्य नहीं है। यदि मैं सही तरीके से याद करता हूं, तो jQuery इवेंट हैंडलर की अपनी सूची बनाए रखता है जो प्रदर्शन और अन्य उद्देश्यों के लिए NodeLists के लिए बाध्य हैं।

— JasonWyatt
स्रोत

2

यदि आपको एक मामले या बहुत कम कैस के लिए इस सुविधा की आवश्यकता है। (orr पूरे ऐप को इस सुविधा की आवश्यकता नहीं है) मैं बल्कि jQuery को छोड़ दूंगा (जैसे कई कारणों से, जिसमें नए संस्करण, CDN आदि को अपडेट करने में सक्षम है) और निम्नलिखित वर्कअराउंड हैं:

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

— adardesign
स्रोत

1

एक ही टैब में हाइपरलिंक खोलने के लिए, उपयोग करें:

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

— DHARMENDRA सिंह
स्रोत