Uncaught TypeError: Не удается прочитать свойство «className» неопределенного jquery

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">

, как я могу это исправить?

Answer 1

От MDN

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

Меняем element.srcElement.className к element.target.className. Вы также можете использовать this.className, так как jQuery устанавливает this в цель события.

$(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">

BTW, используя переменную element держать Event аргумент очень запутанным. Обычно его называют либо event, либо e.

Answer 2

Вместо того, чтобы пытаться использовать классы и получить класс в клике - используйте атрибуты данных HTML5 и нажав div - получите имя из атрибута data. Конечно, если вы создаете divs на основе класса - вам нужно будет оставить это, а также добавить атрибут данных, но это хороший способ получить информацию о нажатом 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">