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

Question 1

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

Question 2

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="") का सफाया कर दिया गया है।

Question 3

सभी का सबसे सरल उत्तर है ...

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

स्निपेट का विस्तार करें

Question 4

Onclick पैरामीटर के साथ ...

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

Question 5

JQuery का जवाब। चूंकि जावास्क्रिप्ट का आविष्कार 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>

Question 6

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

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

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

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

Question 7

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

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

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

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

आशा है कि उपयोग की है।

Question 8

मैं आम तौर पर एलिमेंट ईवेंट को सेट करने के लिए एलिमेंट (एट) या एलीट (आईई) या एलिमेंट का उपयोग करने की सलाह देता हूं। उस तत्व के लिए किसी भी मौजूदा ईवेंट हैंडलर को बदल देगा।

संलग्न / addEventListening कई इवेंट हैंडलर बनाने की अनुमति देते हैं।

Question 9

onclickHTML विशेषता का उपयोग करें ।

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

Question 10

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

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