Uncaught TypeError：未定義のjqueryのプロパティ 'className'を読み取ることができません

Question

divブロックの名前をクリックしようとしています。しかし、私は、コンソールにエラーが表示されます。

Uncaught TypeError: Cannot read property 'className' of undefined.

コードは次のとおりです。

$(window).click(function(element) { 
 
     alert(element.srcElement.className); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="root"> 
 
      <div class="wrap_question_container"> 
 
       <fieldset class="new_question"><legend>Question</legend> 
 
        <p> 
 
         <label for="question_title">Title: </label> 
 
         <input type="text" placeholder="Question Title" name="question_title" required><br> 
 
        </p> 
 
        <div class="choice_add"></div> 
 
       </fieldset> 
 
      </div><br> 
 
     </div> 
 
     <input type="submit" value="Submit" name="submit_val">

は、どのように私はこの問題を解決することができますか？ MDN

Event.srcElement is a proprietary alias for the standard Event.target property. It is specific to old versions of Microsoft Internet Explorer.

から

Answer 1

のでelement.target.classNameにelement.srcElement.classNameを変更します。 jQueryはイベントターゲットにthisを設定するので、this.classNameも使用できます。

$(window).click(function(element) { 
 
    alert(element.target.className); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="root"> 
 
    <div class="wrap_question_container"> 
 
    <fieldset class="new_question"> 
 
     <legend>Question</legend> 
 
     <p> 
 
     <label for="question_title">Title:</label> 
 
     <input type="text" placeholder="Question Title" name="question_title" required> 
 
     <br> 
 
     </p> 
 
     <div class="choice_add"></div> 
 
    </fieldset> 
 
    </div> 
 
    <br> 
 
</div> 
 
<input type="submit" value="Submit" name="submit_val">

ところで、Event引数を保持するためにelementという名前の変数を使用することは非常に紛らわしいです。 eventまたはeのいずれかの名前を付けるのが一般的です。

Answer 2

クラスを使用してクリックを使用するHTML5のデータ属性でクラスを取得し、divをクリックしてデータ属性から名前を取得しようとするのではなく、もちろん、クラスに基づいてdivをスタイリングしている場合は、データ属性を追加するだけでなく、そのままにしておく必要がありますが、クリックしたdivに関する情報を取得するうえで便利です。

$(document).ready(function(){ 
 
    $('.root div').click(function(){ 
 
    var name = $(this).attr('data-name'); 
 
    console.log(name); 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="root"> 
 
      <div data-name="wrap_question_container"> 
 
       <fieldset class="new_question"><legend>Question</legend> 
 
        <p> 
 
         <label for="question_title">Title: </label> 
 
         <input type="text" placeholder="Question Title" name="question_title" required><br> 
 
        </p> 
 
        <div data-name="choice_add"></div> 
 
       </fieldset> 
 
      </div><br> 
 
     </div> 
 
     <input type="submit" value="Submit" name="submit_val">