"this"に添付されているJQueryメソッドを使用できません

ログに「this」と表示されると、正しいコンテナと正しいHTMLツリーが表示されます。 this.method（）を試してみると、この文脈ではこれを参照することはできません。"this"に添付されているJQueryメソッドを使用できません

私の目標は、 "this"がdivコンテナである "this"の子を対象とすることです。私が抱えている問題は、ブラウザが.childrenやそれに付随するjqueryメソッド（this.val（）またはthis.parent）なしで参照されたときに、子があることを認識することを拒否していることです（）、または等）

<!DOCTYPE html> 
<html> 
    <head> 
     <script type="text/javascript" src='http://code.jquery.com/jquery-1.10.2.min.js'></script> 
     <script type = "text/javascript"> 
     $(document).ready(function(id) { 
      var contactCardNo = 0; 
      var newVar = ""; 

      $(document).on('click', ".contact", function() { 
        alert(this); 
        console.log(this); 
        console.log($(this.children())); 
        /*if ($(newVar).is(":hidden")) { 
         $(".contactDescription").hide(); 
         $(newVar).show(); 
        } else { 
         $(".contactDescription").show(); 
         $(newVar).hide(); 
        }*/ 
       }); 

      function attach_handler() { 
       //$(newVar).click(function() { 
       // alert(this); 
       //}); 
       //alert(newVar); 
       var newVar = "\"" + newVar + "\""; 
       alert(newVar); 

      }; 

      $(document).on('click', '#submitButton', function() { 
       var firstName = $("#firstName").val(); 
       var lastName = $("#lastName").val(); 
       var description = $("#description").val(); 
       var idToAttach = "#contact" + contactCardNo++; 
       $("#contacts").append("<div class = 'contact'><p>" + firstName + "&nbsp" + lastName + "</p><p class = 'contactDescription'>Click for a description!</p><p class = 'description'>" + description + "</p></div>"); 
       $(idToAttach).css('width', '300px'); 
       $(idToAttach).css('height', '150px'); 
       $(idToAttach).css('display', 'block'); 
       newVar = idToAttach; 
       attach_handler(); 
       $(idToAttach).hide(); 
       return false; 
      }); 
     }); 
     </script> 
     <style type = "text/css"> 
      *{ 
       padding:0px; 
       margin:0px; 
      } 
      #container{ 
       width:800px; 
       height:800px; 
       display:inline-block; 
      } 
      #contactForm { 
       width:400px; 
       height:400px; 
       display:inline-block; 
       vertical-align:top; 
      } 
      #contacts { 
       width:390px; 
       height:800px; 
       display:inline-block; 
      } 
      .contact { 
       width:300px; 
       height:150px; 
       display:block; 
      } 
      .description { 
       width: 280px; 
       height: 100px; 
      } 
      div{ 
       border:1px solid #000; 
      } 
     </style> 
    </head> 
    <body> 
     <div id = "container"> 
      <span> 
       <div id = "contactForm"> 
        <form> 
        <p>First Name: <input type = "text" name = "firstName" id = "firstName" /></p> 
        <p>Last Name:&nbsp;&nbsp;<input type = "text" name = "lastName" id = "lastName" /></p> 
        <p>Description:</p> 
        <p><input type = "textarea" id = "description" /></p> 
        <p><input type = "button" value = "Add Contact" id = "submitButton" /></p> 
       </div> 
       <div id = "contacts"> 

       </div> 
      </span> 
     </div> 
    </body> 
</html>

出典

2017-02-02 Patrick Feinson

あなたの構文をチェック： 'this.childrenは（）'は機能ではありません、DOMノードには、 '子供（）'メソッドを持っていません！これはjqueryのメソッドであり、 '$（this） 'のようなjQueryオブジェクトで使用する必要があります – Thomas