मैं jquery के माध्यम से एक लंगर क्लिक को कैसे अनुकरण कर सकता हूं?

Question

मुझे jQuery के माध्यम से एंकर क्लिक करने में समस्या है: मेरा गाढ़ा बॉक्स पहली बार इनपुट बटन पर क्लिक करने पर क्यों दिखाई देता है, लेकिन दूसरी या तीसरी बार नहीं?

यहाँ मेरा कोड है:

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

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

जब मैं सीधे लिंक पर क्लिक करता हूं तो यह हमेशा काम करता है, लेकिन अगर मैं इनपुट बटन के माध्यम से मोटीबॉक्स को सक्रिय करने का प्रयास करता हूं तो नहीं। यह एफएफ में है। क्रोम के लिए यह हर बार काम करने लगता है। कोई संकेत?

Comments

आप यहाँ कोड छोड़ रहे हैं। आपके द्वारा दिखाए गए लंगर के लिए क्लिक इवेंट से संबंधित कोई कोड नहीं है। वह कोड क्या करता है? क्या कोई अन्य कोड शामिल है?

— मैट

@ मैट यदि आप बिना किसी पैरामीटर के क्लिक विधि का उपयोग करते हैं, तो इसे अब ईवेंट बाइंडिंग के रूप में व्याख्यायित नहीं किया जाता है, यह वास्तव में क्लिक करेगा (जैसे कि आप अपने माउस से क्लिक करना चाहते थे) जिस तत्व से इसकी जंजीर होती है। इस मामले में, जब इनपुट तत्व पर क्लिक किया जाता है, तो आईडी 'thickboxId' वाले तत्व को भी क्लिक किया जाना चाहिए।

— काइलफ़ारिस

@KyleFarris: क्लिक () ईवेंट Chrome या Safari पर तब तक काम नहीं करता है जब तक कि क्लिक किए जाने वाले तत्व पर एक ऑनक्लिक ईवेंट संलग्न न हो, और फिर भी केवल उस भाग को ट्रिगर करेगा और href मान पर नेविगेट नहीं करेगा। ऊपर के मामले में वह चाहता है कि वह ए टैग की संपत्ति में नेविगेट करे, जैसे कि उपयोगकर्ता ने लिंक पर क्लिक किया है।

— सेंसफुल

Answer 1

उस तरह से अपने jQuery कॉल inlining से बचने की कोशिश करें। clickघटना के लिए बाध्य करने के लिए पृष्ठ के शीर्ष पर एक स्क्रिप्ट टैग लगाएं :

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

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

यदि आप किसी उपयोगकर्ता को लिंक पर क्लिक करके भौतिक रूप से अनुकरण करने का प्रयास कर रहे हैं, तो मुझे विश्वास नहीं है कि यह संभव है। जावास्क्रिप्ट में clickबदलने के लिए बटन की घटना को अद्यतन करने के लिए एक वर्कअराउंड होगा window.location:

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

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

अब जब मुझे एहसास हुआ कि थिकबॉक्स एक कस्टम jQuery UI विजेट है, तो मुझे यहाँ निर्देश मिले :

निर्देश:

• लिंक तत्व बनाएं ( <a href>)

• लिंक को मोटीबॉक्स के मान के साथ एक वर्गीय विशेषता दें ( class="thickbox")

• hrefलिंक की विशेषता में निम्नलिखित एंकर जोड़ें:#TB_inline

• में hrefके बाद विशेषता #TB_inlineऐड लंगर के लिए पर निम्नलिखित खंड स्ट्रिंग:

  ? ऊंचाई = 300 और चौड़ाई = 300 और inlineId = myOnPageContent

• तदनुसार क्वेरी में ऊँचाई, चौड़ाई और इनलाइनआईड के मान बदलें (इनलाइन उस तत्व का आईडी मूल्य है जिसमें वह सामग्री है जिसे आप थिकबॉक्स में दिखाना चाहते हैं।

• वैकल्पिक रूप से आप क्वेरी स्ट्रिंग (जैसे #TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true) में modal = true जोड़ सकते हैं ताकि थिकबॉक्स को बंद करने के लिए थिकबॉक्स tb_remove()से फ़ंक्शन को कॉल करना पड़े। छिपे हुए मोडल कंटेंट उदाहरण देखें, जहां आपको थिकबॉक्स को बंद करने के लिए हां या ना पर क्लिक करना होगा।

Comments

क्लिक हैंडलर में window.location काम नहीं करती है, क्योंकि तब थिकबॉक्स अपेक्षा के अनुरूप काम नहीं करता है।

— प्रिंज़डिबेल

दूसरे उदाहरण में इसे हल किए गए url प्राप्त करने के .prop()बजाय उपयोग करने की सलाह दी जा सकती है attr()।

— केविन बोवर्सॉक्स

मुझे आश्चर्य है कि यह स्वीकृत उत्तर है। क्लिक ट्रिगर केवल देशी DOM तत्व पर काम करेगा, jQuery के आवरण तत्व पर नहीं। यह @Stevanicus और टिप्पणियों, और कई अन्य एसओ पदों पर चर्चा की है। इसका उत्तर स्टवानिकस के लिए बदल दिया जाना चाहिए।

— ओलिवर

@Schollii - अपनी इच्छित शुद्धता के लिए इसे संपादित करने के लिए स्वतंत्र महसूस करें।

— जॉन राश

मेरा मतलब था कि स्वीकृत उत्तर @stevanicus

— ओलिवर

Answer 2

मेरे लिए क्या काम था:

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

Comments

। दान करता है कि अगला भाग एक वर्ग नाम है। # एक आईडी के लिए होगा।

— स्टवानिकस

यदि यह एक इनपुट के लिए आवश्यक है, तो focusइसके बजाय का उपयोग करें click:)

— एंड्रियस Naruševičius

यह मेरे लिए भी काम करता है, लेकिन यह काम क्यों करता है? क्यों $ ('a.mylink') [0] .click () काम करता है लेकिन $ ('a.mylink')। eq (0) .click () नहीं करता है?

— ChrisC

[0]सरणी के पहले तत्व को इंगित करता है - एक चयनकर्ता 0 या अधिक तत्व देता है जब इसका निष्पादन किया जाता है। यह दुर्भाग्यपूर्ण है कि .click()प्रतीत नहीं होता है कि यहाँ सीधे काम किया जा रहा है क्योंकि प्रतीत होता है कि अन्य इनवोकेशन को चयनकर्ताओं के तत्वों के संग्रह में लागू किया जाता है।

— cfeduke

का उपयोग करना [0]या .get(0)समान हैं। ये jQuery संस्करण के बजाय तत्व के DOM संस्करण का उपयोग करते हैं। .click()इस मामले में समारोह jQuery क्लिक करें घटना है, लेकिन देशी एक नहीं है।

— रेडली सस्टेयर

Answer 3

मैंने हाल ही में 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>

Comments

मुझे नहीं लगता कि यह IE में काम करता है, कम से कम 7 या 8 नहीं, क्योंकि दस्तावेज़ में एक निर्माण विधि प्रतीत नहीं होती है।

— जेरेमी

जैसा कि ईगल कहते हैं, यह वेबकिट ब्राउज़र में काम करता है। लेकिन ध्यान दें कि आप वास्तव में jQuery का उपयोग नहीं कर रहे हैं ($ चयन के अलावा)

— टोकन

यह जादू का आधा हिस्सा गायब है: stackoverflow.com/questions/1421584/…

— daniloquio

Answer 4

यह दृष्टिकोण फ़ायरफ़ॉक्स, क्रोम और IE पर काम करता है। उम्मीद है कि यह किसी की मदद करता है:

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

Comments

मेरी राय में क्रॉस संगतता के कारण बहुत उपयोगी और बेहतर विकल्प। मैं कोशिश / पकड़ ब्लॉक में सब कुछ लपेटने के लिए पसंद नहीं है, लेकिन मुझे लगता है कि यह प्रत्येक ब्राउज़र के लिए कैस्केड प्रयासों के लिए किया जाता है।

— hrr53

Answer 5

हालांकि यह बहुत पुराना सवाल है लेकिन मुझे इस काम को संभालने में कुछ आसान लगा। यह jquery UI द्वारा विकसित jquery प्लगइन है जिसे simulate कहा जाता है। आप इसे jquery के बाद शामिल कर सकते हैं और फिर आप कुछ ऐसा कर सकते हैं

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

क्रोम, फ़ायरफ़ॉक्स, ओपेरा और IE10.you में ठीक काम करता है इसे https://github.com/eduardolundgren/jquery-simulate/blob/master/jquery.simulate.js से डाउनलोड कर सकते हैं

Comments

इसकी एक प्रमुख विशेषता simulate()यह है कि यह jQuery की घटनाओं के साथ-साथ देशी ब्राउज़र कार्रवाई को ट्रिगर करता है। यह अब सही उत्तर है +1

— गोन कोडिंग

एक आकर्षण की तरह काम करता है और यह मुझे एक नए टैब में पृष्ठ को खोलने देता है जब उपयोगकर्ता मेरे केडो ग्रिड में एक बटन पर क्लिक करता है।

— जॉन सुल्ली

Answer 6

प्रश्न शीर्षक कहता है "मैं jQuery में एंकर क्लिक कैसे अनुकरण कर सकता हूं?"। ठीक है, आप "ट्रिगर" या "ट्रिगरहैंडलर" विधियों का उपयोग कर सकते हैं, जैसे:

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

परीक्षण नहीं, यह वास्तविक स्क्रिप्ट, लेकिन मैंने पहले भी triggerएट अल का उपयोग किया है , और उन्होंने काम किया।

अद्यतन
triggerHandler वास्तव में नहीं करता है कि ओपी क्या चाहता है। मुझे लगता है कि 1421968 इस सवाल का सबसे अच्छा जवाब प्रदान करता है।

Answer 7

मैं सेलेनियम एपीआई को देखने का सुझाव दूंगा कि वे एक तत्व को ब्राउज़र-संगत तरीके से क्लिक पर कैसे ट्रिगर करते हैं:

• सेलेनियम-browserbot.js

के लिए देखो BrowserBot.prototype.triggerMouseEventसमारोह।

Answer 8

मेरा मानना ​​है कि आप उपयोग कर सकते हैं:

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

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

यह आसानी से क्लिक फ़ंक्शन को ट्रिगर करेगा, वास्तव में उस पर क्लिक किए बिना।

Answer 9

क्या आपको एक लंगर क्लिक को नकली करने की आवश्यकता है? गाढ़े बॉक्स साइट से:

थिकबॉक्स को एक लिंक एलिमेंट, इनपुट एलिमेंट (आमतौर पर एक बटन), और एरिया एलिमेंट (इमेज मैप्स) से मंगाया जा सकता है।

यदि यह स्वीकार्य है तो इनपुट पर ही मोटीबॉक्स क्लास लगाना उतना ही आसान होना चाहिए:

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

यदि नहीं, तो मैं फ़ायरबग का उपयोग करने और एंकर तत्व के ऑनक्लिक विधि में एक ब्रेकपॉइंट रखने की सलाह दूंगा, यह देखने के लिए कि क्या यह केवल पहले क्लिक पर चालू है।

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

ठीक है, मुझे इसे अपने लिए और मेरे लिए बहुत सटीक रूप से अपने कोड क्रोम और फ़ायरफ़ॉक्स दोनों में काम करना था:

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

अगर मैं इनपुट या एंकर तत्व पर क्लिक करता हूं तो विंडो पॉप अप से कोई फर्क नहीं पड़ता। यदि उपरोक्त कोड आपके लिए काम करता है, तो मैं सुझाव देता हूं कि आपकी त्रुटि कहीं और निहित है और आप समस्या को अलग करने का प्रयास करते हैं।

एक और संभवतः यह है कि हम jquery / thickbox के विभिन्न संस्करणों का उपयोग कर रहे हैं। मैं उपयोग कर रहा हूँ जो मुझे मोटे बॉक्स पेज से मिला है - jquery 1.3.2 और thickbox 3.1।

Comments

हां, मुझे इसे नकली बनाने की जरूरत है और हां क्लिक हैंडलर खुद काम करता है। लेकिन वास्तव में, मैंने ऑन्कलिक घटना को बिल्कुल भी निर्धारित नहीं किया और यह काम करता है, लेकिन केवल पहली बार। लेकिन यह भी मोटी बॉक्स में संभाला onclick के साथ यह काम नहीं करेगा।

— प्रिंज़ेडिबेल

मेरा मतलब यह था कि हर बार जब आप इनपुट तत्व पर क्लिक करते हैं तो एंकर तत्व में ऑन्कलिक चालू हो जाता है। ओह, और ऊपर मेरा संपादन देखें।

— वैक्सिंग

Answer 10

आप अपने लिंक href की नकल करने वाले एक्शन के साथ jQuery के माध्यम से या HTML पेज कोड में एक फॉर्म बना सकते हैं:

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

Comments

यह विधि पूरे पृष्ठ को केवल एंकर के लिए कूदने के बजाय फिर से लोड करने का कारण बनती है। इसके अतिरिक्त, यह भी "जोड़ता है?" यूआरएल के लिए इतना पेज हो जाता है example.com?#test बजाय example.com # परीक्षण । क्रोम और सफारी पर परीक्षण किया गया।

— सेंसफुल

एफएफ में यह अच्छी तरह से काम करेगा। वेबकिट-ब्राउज़र में आपको सेंसफुल वर्णित के रूप में यूआरएल मिलेगा। लेकिन यह कोई समस्या नहीं है, है ना?

— sdepold

Answer 11

एक पृष्ठ पर उतरते समय एक लंगर पर एक क्लिक का अनुकरण करने के लिए, मैंने बस $(document).ready.एक जटिल ट्रिगर के लिए कोई ज़रूरत नहीं में स्क्रॉलटॉप संपत्ति को एनिमेट करने के लिए jQuery का उपयोग किया , और यह IE 6 और हर दूसरे ब्राउज़र पर काम करता है।

Answer 12

यदि आपको JQuery का उपयोग करने की आवश्यकता नहीं है, जैसा कि मैं नहीं। मुझे क्रॉस ब्राउज़र की समस्या से जूझना पड़ा है .click()। इसलिए मैं उपयोग करता हूं:

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

Comments

त्वरित और गंदा, लेकिन मेरे लिए काम किया। JQuery में यह eval है ($ ("# someid")। Attr ("href"));

— mhenry1384

Answer 13

जावास्क्रिप्ट में आप ऐसा कर सकते हैं

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

और आप इसे उपयोग कर सकते हैं

submitRequest("target-element-id");

Answer 14

Jure की स्क्रिप्ट का उपयोग करके मैंने इसे आसानी से "क्लिक" के रूप में कई तत्वों के रूप में किया, जो आप चाहते हैं।
मैंने इसे केवल 1600+ आइटम पर Google रीडर का उपयोग किया और इसने पूरी तरह से (फ़ायरफ़ॉक्स में) काम किया!

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

Comments

मुझे नहीं लगता कि यह IE में काम करता है, कम से कम 7 या 8 नहीं, क्योंकि दस्तावेज़ में एक निर्माण विधि प्रतीत नहीं होती है।

— जेरेमी

मेरा मानना ​​है कि IE में इसके बजाय document.createEventObject () का उपयोग किया जाना चाहिए, लेकिन मैंने इसकी कोशिश नहीं की है।

— फ्रीगर्ल

@ bfred.it: ऐसा लगता है createEventObjectकि IE में सिंथेटिक इवेंट भेजने के बजाय हैंडलर को पास करने के लिए एक ईवेंट ऑब्जेक्ट बनाने के लिए अधिक है। IE के fireEventकरीब हो सकता है dispatchEvent, लेकिन यह केवल श्रोताओं को ट्रिगर करेगा - डिफ़ॉल्ट ब्राउज़र क्रियाएं नहीं। हालाँकि, IE में आप केवल clickविधि को कॉल कर सकते हैं ।

— theazureshadow

Answer 15

JQuery('#left').triggerHandler('click');फ़ायरफ़ॉक्स और IE7 में ठीक काम करता है। मैंने अन्य ब्राउज़रों पर इसका परीक्षण नहीं किया है।

यदि स्वचालित उपयोगकर्ता क्लिक ट्रिगर करना चाहते हैं, तो निम्न कार्य करें:

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

Answer 16

यह "छिपे हुए इनपुट (फ़ाइल) तत्व" पर क्लिक करने के लिए एंड्रॉइड देशी ब्राउज़र पर काम नहीं करता है:

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

लेकिन यह काम करता है:

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

Answer 17

JQuery UI स्पिनर के साथ यूनिट परीक्षणों में एक 'क्लिक' को अनुकरण करने की कोशिश में मुझे काम करने के लिए पिछले उत्तरों में से कोई भी नहीं मिला। विशेष रूप से, मैं नीचे तीर का चयन करने के 'स्पिन' का अनुकरण करने की कोशिश कर रहा था। मैंने jQuery UI स्पिनर इकाई परीक्षणों को देखा और वे निम्नलिखित विधि का उपयोग करते हैं, जो मेरे लिए काम करता है:

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