जब मैं $(body) का उपयोग करने का प्रयास करता हूं तो यह भी काम नहीं कर रहा है, शायद एक आसान फिक्स मैं समझ नहीं सकता। लेकिन मैं अब दो घंटे से कोशिश कर रहा हूं।

<button onclick="bye()">Click me</button>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(
    function bye(){
        $(this).hide();
    });

</script>
0
Cepler Light 17 नवम्बर 2020, 13:13

1 उत्तर

सबसे बढ़िया उत्तर

जब आप onclick="bye()" जैसे "इनलाइन" ईवेंट हैंडलर का उपयोग करते हैं, तो आप जिस फ़ंक्शन को कॉल कर रहे हैं उसे वैश्विक दायरे में परिभाषित किया जाना चाहिए। आपके उदाहरण में आप फ़ंक्शन को कॉलबैक के रूप में $(document).ready के बजाय पास कर रहे हैं, जो कई कारणों से गलत है, लेकिन फ़ंक्शन निश्चित रूप से वैश्विक दायरे में परिभाषित नहीं है।

आपको बस लिखना चाहिए

// no $(document).ready here
function bye() {
  $(this).hide();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="bye()">Click me</button>

हालांकि यह अभी भी काम नहीं करेगा! भले ही फ़ंक्शन अब ईवेंट हैंडलर के लिए दृश्यमान है, लेकिन जब इसे कॉल किया जाता है तो इसका गलत this मान होगा। चूंकि आप अपने ईवेंट हैंडलर (bye()) में "सामान्य रूप से" फ़ंक्शन को कॉल कर रहे हैं, this या तो undefined या वैश्विक ऑब्जेक्ट (सख्त मोड के आधार पर) होगा।

बटन तत्व को संदर्भित करने के लिए this के लिए, आपको इसके बजाय अपने ईवेंट हैंडलर को bye.call(this) में बदलना होगा। .call फ़ंक्शन को लागू करेगा और this मान को पहले तर्क पर सेट करेगा। इनलाइन ईवेंट हैंडलर के अंदर, this बटन तत्व को संदर्भित करता है:

function bye() {
  $(this).hide();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="bye.call(this)">Click me</button>
<!--             ^^^^^^^^^^^^^^                -->

वैकल्पिक रूप से, this के अंदर bye का उपयोग करने के बजाय, आप ईवेंट हैंडलर को तर्क के रूप में तत्व का संदर्भ दे सकते हैं:

function bye(element) {
//           ^^^^^^^
  $(element).hide();
//  ^^^^^^^
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="bye(this)">Click me</button>
<!--             ^^^^^^^^^                -->

यह सब कहने के बाद, इनलाइन ईवेंट हैंडलर्स का उपयोग करने की तुलना में ईवेंट हैंडलर्स को बाइंड करने के अधिक आधुनिक तरीके हैं। आप ईवेंट हैंडलर को बाध्य करने के लिए jQuery का उपयोग कर सकते हैं:

$(document).ready(function() {         // once the DOM is loaded
  $('button').on('click', function() { // bind a click event handler
                                       // to every button element
    $(this).hide();                    // which hides the element
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click me</button>
1
Felix Kling 17 नवम्बर 2020, 10:28