सवाल हाइपरलिंक क्लिक पर जावास्क्रिप्ट फ़ंक्शन पर कॉल करें


मैं एएसपी.नेट की फाइल के पीछे सी # कोड में गतिशील रूप से हाइपरलिंक बना रहा हूं। मुझे क्लाइंट क्लिक पर एक जावास्क्रिप्ट फ़ंक्शन कॉल करने की आवश्यकता है। मैं इसे कैसे पूर्ण करूं?


76
2017-08-12 12:32


मूल


के संभावित डुप्लिकेट जावास्क्रिप्ट को कॉल करने के लिए एक लिंक का उपयोग कैसे करें? - Trilarion


जवाब:


Neater अभी भी, के बजाय typical href="#" या href="javascript:void" या href="whatever", मुझे लगता है कि यह और अधिक समझ में आता है:

var el = document.getElementById('foo');
el.onclick = showFoo;


function showFoo() {
  alert('I am foo!');
  return false;
}

<a href="no-javascript.html" title="Get some foo!" id="foo">Show me some foo</a>

यदि जावास्क्रिप्ट विफल रहता है, तो कुछ प्रतिक्रिया होती है। इसके अलावा, अनियमित व्यवहार (मामले में कूदते पृष्ठ href="#", के मामले में एक ही पृष्ठ पर जाकर href="") समाप्त हो गया है।


118
2017-08-12 12:40



+1 यह वर्तमान में एकमात्र अविभाज्य उत्तर है। +100 अगर मैं कर सकता था। - James
@ लुईस, हाँ, आदर्श <a> टैग का उपयोग शुद्ध जेएस कॉल के लिए नहीं किया जाएगा, लेकिन दुर्भाग्यवश पुराने ब्राउज़र समर्थित नहीं थे: गैर-लिंक तत्वों के लिए होवर करें। तो जेएस घटनाओं को ट्रिगर करने के लिए अक्सर लिंक का उपयोग किया जाता था। - Chris Van Opstal
@ क्रिस - मुझे यकीन नहीं है कि आप मेरा पॉइंट क्रिस प्राप्त करें। मैं सुझाव दे रहा हूं कि आप <a href="#"> कुछ भी नहीं </a> का उपयोग नहीं करते हैं और इसके बजाय <a href="a/link/somwhere.html"> कुछ करें </a> का उपयोग करें और फिर उपयोग करें href को ओवरराइड करने के लिए प्रगतिशील वृद्धि। यह सबसे साफ समाधान है। एंकर ठीक हैं, लेकिन जावास्क्रिप्ट अक्षम होने पर उन्हें कुछ करना चाहिए - या किसी कारण से (आईई 6 के अनुसार) हैंडलर बनाया और सौंपा जाने से पहले कुछ जावास्क्रिप्ट तोड़ दिया गया। इस तरह आपके सभी उपयोगकर्ता खुश हैं। - Lewis
मेरे लिए काम नहीं कर रहा है, पेज लोड पर स्वचालित रूप से ऑनक्लिक फ़ंक्शन निष्पादित करता है। यह एक दुःस्वप्न की तरह लगता है जहां अभिगम्यता का संबंध है। - Shawn Solomon
यह काम नहीं करता है, यह आपको सिर्फ href url पर निर्देशित करता है। - poepje


सभी का सबसे सरल जवाब है ...

<a href="javascript:alert('You clicked!')">My link</a>

या जावास्क्रिप्ट फ़ंक्शन को कॉल करने के प्रश्न का उत्तर देने के लिए:

<script type="text/javascript">
function myFunction(myMessage) {
    alert(myMessage);
}
</script>

<a href="javascript:myFunction('You clicked!')">My link</a>


46
2017-09-11 23:54



गैर-जावास्क्रिप्ट-प्रोग्रामर की सहायता के लिए आप एक आशीर्वाद भेजा गया है। धन्यवाद जेडन! - Fattie
यह फ़ायरफ़ॉक्स में काम नहीं कर रहा है - Anthony
एंथनी यह फ़ायरफ़ॉक्स में ठीक काम करता प्रतीत होता है। - Jayden Lawson


ऑनक्लिक पैरामीटर के साथ ...

<a href='http://www.google.com' onclick='myJavaScriptFunction();'>mylink</a>

23
2017-08-12 12:35





JQuery उत्तर। चूंकि जावास्क्रिप्ट का विकास करने के लिए जावास्क्रिप्ट का आविष्कार किया गया था, इसलिए मैं आपको JQuery में ऐसा करने का एक उदाहरण दे रहा हूं:

<div class="menu">
    <a href="http://example.org">Example</a>
    <a href="http://foobar.com">Foobar.com</a>
</div>

<script>
jQuery( 'div.menu a' )
    .click(function() {
        do_the_click( this.href );
        return false;
    });

// play the funky music white boy
function do_the_click( url )
{
    alert( url );
}
</script>

13
2017-08-12 13:28



JQuery विकसित करने के लिए जावास्क्रिप्ट का आविष्कार किया गया था? यह एक नया है! - palswim
यह पढ़ना था कि लेगो बैटमैन बनाने के लिए लेगो का आविष्कार किया गया था। - Shawn Solomon
@ShawnSolomon मुझे खुशी है कि हम सहमत हैं :) - elcuco
@elcuco, महान कटाक्ष! + डी :) लांग लाइव JQuery - Zuul


आदर्श रूप में मैं पूरी तरह से आपके पीछे कोड में लिंक उत्पन्न करने से बचूंगा क्योंकि हर बार जब आप उन प्रत्येक लिंक के 'मार्कअप' में बदलाव करना चाहते हैं तो आपके कोड को फिर से सम्मिलित करने की आवश्यकता होगी। यदि आपको ऐसा करना है तो मैं आपके एचटीएमएल के अंदर अपनी जावास्क्रिप्ट 'कॉल' एम्बेड नहीं करूंगा, यह एक खराब अभ्यास है, आपके मार्कअप को आपके दस्तावेज़ का वर्णन नहीं करना चाहिए, यह आपके जावास्क्रिप्ट का काम है।

एक ऐसे दृष्टिकोण का उपयोग करें जहां आपके पास प्रत्येक तत्व (या कक्षा की सामान्य कार्यक्षमता) के लिए एक विशिष्ट आईडी है और फिर इवेंट हैंडलर जोड़ने के लिए प्रोग्रेसिव एन्हांसमेंट का उपयोग करें, जैसे कुछ:

[c# example only probably not the way you're writing out your js]
Response.Write("<a href=\"/link/for/javascriptDisabled/Browsers.aspx\" id=\"uxAncMyLink\">My Link</a>");

[Javascript]  
document.getElementById('uxAncMyLink').onclick = function(e){

// do some stuff here

    return false;
    }

इस तरह आपका कोड जेएस अक्षम उपयोगकर्ताओं के लिए नहीं टूट जाएगा और इसमें चिंताओं का स्पष्ट पृथक्करण होगा।

उम्मीद है कि उपयोग की है।


4
2017-08-12 12:52



सी क्यों#? क्यों नहीं <a href="/link/for/javascriptDisabled/Browsers.aspx" id="uxAncMyLink">My Link</a>? - Mahmoodvcs


मैं जावास्क्रिप्ट हाइपरलिंक्स के लिए href की बजाय ऑनक्लिक विधि का उपयोग करना पसंद करता हूं। और हमेशा यह निर्धारित करने के लिए अलर्ट का उपयोग करें कि आपके पास क्या मूल्य है।

<a href='#' onclick='jsFunction();alert('it works!');'>Link</a>

यह इनपुट टैग उदाहरणों पर भी इस्तेमाल किया जा सकता है।

<input type='button' value='Submit' onclick='jsFunction();alert('it works!');'>


4
2017-08-12 13:56





मैं आमतौर पर onclick ईवेंट को सेट करने के लिए element.attachEvent (IE) या element.addEventListener (अन्य ब्राउज़र्स) का उपयोग करने की अनुशंसा करता हूं क्योंकि बाद वाले व्यक्ति उस तत्व के लिए किसी भी मौजूदा ईवेंट हैंडलर को प्रतिस्थापित करेंगे।

attachEvent / addEventListening एकाधिक ईवेंट हैंडलर बनने की अनुमति देता है।


2
2017-08-12 13:14





उपयोग onclick एचटीएमएल विशेषता

onclick इवेंट हैंडलर कैप्चर करता है   उपयोगकर्ताओं के माउस से ईवेंट पर क्लिक करें   उस तत्व पर बटन जिस पर    onclick विशेषता लागू होती है। इस   कार्रवाई आमतौर पर एक कॉल के परिणामस्वरूप होती है   एक जावास्क्रिप्ट जैसे स्क्रिप्ट विधि   समारोह [...]


1
2017-08-12 12:38





यदि आप पृष्ठ को लोड होने की प्रतीक्षा नहीं करते हैं तो आप आईडी द्वारा तत्व का चयन करने में सक्षम नहीं होंगे। कोड को निष्पादित करने में परेशानी होने वाले किसी भी व्यक्ति के लिए यह समाधान काम करना चाहिए

<script type="text/javascript">
window.onload = function() {
    document.getElementById("delete").onclick = function() {myFunction()};

    function myFunction() {
        //your code goes here
        alert('Alert message here');
    }
};
</script>

<a href='#' id='delete'>Delete Document</a>

0
2017-10-27 15:48