jquery $（これ））を正しく理解していない

Question

jquery $(this)がどのように機能するかについて私は誤解していると思います。私のコードでは、

$(document).delegate(".ISBN_number", "change", 
     function() 
     { 
      var isbnNum = $(this).val(); 
      console.log("isbnNum = " + isbnNum); 
      $.get("validate_isbn.php", {isbn: isbnNum}, 
       function(answer) 
       {     
        console.log("answer = " + answer); //this does display the correct content 
        if (answer == true) 
        { console.log("entered answer"); 
         $(this).after("<img src='pics/green_checkmark.png' class='checkmark'>"); 
        } 
        else 
        { 
         $(this).after("nope"); 
        } 
      });    
    }); 

内容が変更されたときに入力タグを選択しようとしています。コードで$(thisと呼ぶと）、この入力タグを参照すると仮定しましたが、そうではありません。私の問題は何ですか？それは.delegateを使用したためですか？ （私は入力タグが後で動的に生成されるので、これを使う必要がありました。元のコードには存在しません）どうすればこの問題を解決できますか？

Answer 1

、その後、あなたはthisが別の何かに設定されているため、ローカル変数にそれを保存する必要があります。ただし、キャッシュ変数を使用していることを回避することができるはずですajax呼び出しの完了関数で使用します。あなたはこのようにそれを行うことができます：あなたはISBN番号をInputBox関数を使用している場合は

$(document).delegate(".ISBN_number", "change", 
     function() 
     { 
      var self = this; 
      var isbnNum = $(this).val(); 
      console.log("isbnNum = " + isbnNum); 
      $.get("validate_isbn.php", {isbn: isbnNum}, 
       function(answer) 
       {     
        console.log("answer = " + answer); //this does display the correct content 
        if (answer == true) 
        { console.log("entered answer"); 
         $(self).after("<img src='pics/green_checkmark.png' class='checkmark'>"); 
        } 
        else 
        { 
         $(self).after("nope"); 
        } 
      });    
    }); 

Answer 2

$(this)は、現在のスコープを指します。あなたの場合、最初の$(this)は.ISBN_numberを指し、もう1人の$(this)は異なる範囲を指します。

あなたはそうのような最初の$(this)をキャッシュする必要があります。

$(document).delegate(".ISBN_number", "change", 
    function() 
    { 
     $isbn = $(this); 
     var isbnNum = $isbn.val(); 
     console.log("isbnNum = " + isbnNum); 
     $.get("validate_isbn.php", {isbn: isbnNum}, 
      function(answer) 
      {     
       console.log("answer = " + answer); //this does display the correct content 
       if (answer == true) 
       { console.log("entered answer"); 
        $isbn.after("<img src='pics/green_checkmark.png' class='checkmark'>"); 
       } 
       else 
       { 
        $isbn.after("nope"); 
       } 
     });    
}); 

Answer 3

this（var isbnNum = $(this).val();）がそれにchangeイベントの火を持っていた.ISBN_number要素を指します。 $(this)は、jQueryオブジェクトにラップされた同じDOM要素を参照するため、jQuery関数を呼び出すことができます。

あなたはAJAX呼び出しまたは匿名関数を使用して、関数呼び出しの他のタイプを作るとき、元thisをキャッシュすることをお勧めです：

$(document).delegate(".ISBN_number", "change", 
     function() 
     { 
      var $this = $(this), 
       isbnNum = $this.val(); 
      console.log("isbnNum = " + isbnNum); 
      $.get("validate_isbn.php", {isbn: isbnNum}, 
       function(answer) 
       {     
        console.log("answer = " + answer); //this does display the correct content 
        if (answer == true) 
        { console.log("entered answer"); 
         $this.after("<img src='pics/green_checkmark.png' class='checkmark'>"); 
        } 
        else 
        { 
         $this.after("nope"); 
        } 
      });    
    }); 

あなたはいつもに言及している知っているその方法同じthis。

Answer 4

thisは、コールバック関数内でコードが変更されることがあります。あなたは.delegate()呼び出しからthisにアクセスしたい場合は

$(document).delegate(".ISBN_number", "change", function() { 
    var $this = $(this); 
    var isbnNum = $this.val(); 
    console.log("isbnNum = " + isbnNum); 
    $.get("validate_isbn.php", { 
     isbn: isbnNum 
    }, function (answer) { 
     console.log("answer = " + answer); //this does display the correct content 
     if (answer == true) { 
      console.log("entered answer"); 
      $this.after("<img src='pics/green_checkmark.png' class='checkmark'>"); 
     } else { 
      $this.after("nope"); 
     } 
    }); 
}); 

Answer 5

は、＃（この）.val（）は値がテキストボックスに変更/入力されたあなたを与えます。