मेरे पास यह MDN का कोड स्निपेट है

फिर मैंने एक अनुच्छेद में एक jQuery क्लिक ईवेंट संलग्न करने के लिए अपना स्वयं का कोड जोड़ा।

शायद उदाहरण दिखाना सबसे अच्छा है:

 function Person(first, last, age, gender, interests) {
      this.name = {
        'first': first,
        'last' : last
      };
      this.age = age;
      this.gen = gender;
      this.int = interests;
      this.nationality = "English";
      this.bio = function() {
        alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.int[0] + ' and ' + this.int[1] + '.');
      };
      this.greeting = function() {
        alert('Hi! I\'m ' + this.name.first + '.');
      };
      this.tt = function() {
        alert('Hi! I\'m ' + this.gen + '.');
      };  
    
      this.init= function() {
      	 $("p").click(function(){
      	  alert('Hi!');	//works fine
          alert('Hi! I\'m ' + this.name.first + '.');//obj.html:34 Uncaught TypeError: Cannot read property 'first' of undefined
         }); 
      };
    
      this.init(); //Bind to the P tag using jQuery click event
    
    }
    var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
    console.log(Person);
    person1.bio();
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <p>My first paragraph.</p>
 

तो जब मैं पी तत्व पर क्लिक करता हूं तो मुझे अलर्ट मिलता है हाय! उसके बाद न आया हुआ त्रुटि संदेश आता है।

मुझे पढ़ने के लिए दूसरा अलर्ट कैसे मिलेगा, "नमस्ते! मैं बॉब हूं"

0
JimF 28 मार्च 2018, 11:15

5 जवाब

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

आपकी समस्या को हल करने के कुछ तरीके हैं। जावास्क्रिप्ट में this कीवर्ड मुश्किल है। आपकी समस्या का मूल यह है कि this वह नहीं है जो आप सोचते हैं। अधिक विवरण के लिए देखें "यह" कीवर्ड कैसे काम करता है?

1) this को व्यापक दायरे में एक चर में कैश करें।

this.init = function () {
  var self = this;
  $("p").click(function () {
    alert('Hi!');
    alert('Hi! I\'m ' + self.name.first + '.');
  });
};

2) this को उस फंक्शन में बांधें जिसे बुलाया जा रहा है

this.init = function () {
  var handleClick = function () {
    alert('Hi!');
    alert('Hi! I\'m ' + self.name.first + '.');
  };
  handleClick = handleClick.bind(this);
  $("p").click(handleClick);
}; 
2
Steven 28 मार्च 2018, 08:37

चर के लिए this का उपयोग करते समय सावधान रहें। This, in your code refers to theव्यक्तिinstance. As soon as you create a new functionयहno longer references theव्यक्तिfunction, but thethis.initfunction, thusव्यक्ति` अब इस संदर्भ में मौजूद नहीं है।

बल्कि उपयोगकर्ता var name... चर का उपयोग करते समय, आप इसे किसी अन्य संदर्भ या फ़ंक्शन में संदर्भित करने में सक्षम होंगे:

<!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
    <p>My first paragraph.</p>
    <script>
    function Person(first, last, age, gender, interests) {
      var name = {
        'first': first,
        'last' : last
      };
      var age = age;
      var gen = gender;
      var int = interests;
      var nationality = "English";
      this.bio = function() {
        alert(name.first + ' ' + name.last + ' is ' + age + ' years old. He likes ' + int[0] + ' and ' + int[1] + '.');
      };
      this.greeting = function() {
        alert('Hi! I\'m ' + name.first + '.');
      };
      this.tt = function() {
        alert('Hi! I\'m ' + gen + '.');
      };  
    
      this.init= function() {
      	 $("p").click(function(){
      	  alert('Hi!');	//works fine
          alert('Hi! I\'m ' + name.first + '.');//obj.html:34 Uncaught TypeError: Cannot read property 'first' of undefined
         }); 
      };
    
      this.init(); //Bind to the P tag using jQuery click event
    
    }
    var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
    console.log(Person);
    person1.bio();
    </script>	
    </body>
    </html>
0
Dévan Coetzee 28 मार्च 2018, 08:43

आपको this को उस अनाम फ़ंक्शन से बाइंड करना होगा, जिसे आपने jQuery क्लिक () फ़ंक्शन में पास किया था।

function Person(first, last, age, gender, interests) {
  this.name = {
    'first': first,
    'last' : last
  };
  this.age = age;
  this.gen = gender;
  this.int = interests;
  this.nationality = "English";
  this.bio = function() {
    alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.int[0] + ' and ' + this.int[1] + '.');
  };
  this.greeting = function() {
    alert('Hi! I\'m ' + this.name.first + '.');
  };
  this.tt = function() {
    alert('Hi! I\'m ' + this.gen + '.');
  };  

  this.init= function() {
     $("p").click(function(){
      alert('Hi!'); //works fine
      alert('Hi! I\'m ' + this.name.first + '.');
     }.bind(this)); 
  };

  this.init(); //Bind to the P tag using jQuery click event

}
var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
console.log(Person);
person1.bio();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>My first paragraph.</p>
0
Deepu Reghunath 28 मार्च 2018, 08:39

ऐसा करने का एक और तरीका है कि jQuery फ़ंक्शन के बाहर केवल एक चर name घोषित करें और इसे फ़ंक्शन के अंदर उपयोग करें

this.init = function() {
    var name = this.name;
    $("p").click(function(){
        alert('Hi!');
        alert('Hi! I\'m ' + name.first + '.');
    }); 
};
0
Dumisani 28 मार्च 2018, 08:33

यदि आप व्यक्ति वस्तु के संदर्भ को बनाए रखना चाहते हैं, तो आपको jQuery कॉलबैक फ़ंक्शन को इस बाइंडिंग के साथ बाँधना होगा।

this.init= function() {
     $("p").click(function(){
      alert('Hi!'); //works fine
      alert('Hi! I\'m ' + this.name.first + '.');
     }.bind(this));//binding this prevents the error
  };
2
Travis J 28 मार्च 2018, 08:24