JQuery атрибут данных onclick "undefined"

Question

У меня проблема с извлечением атрибутов данных из ввода при использовании синтаксиса onclick = "javascript ()".

Вот jsfiddle того, что я пытаюсь:

https://jsfiddle.net/123umaon/2/

<div>
  <input onclick="Test();" type="button" value="test" data-section="thisSection"/>
</div>

function Test(){
var test = $(this).data('section');
alert(test);
}

Я хочу получить значение «data-section» с помощью действия onclick. Но в моем примере это всегда возвращается неопределенным.

Answer 1

Вам необходимо сослаться на текущее событие. В контексте функции Test() this относится к окну вместо элемента DOM.

$('#testOut').val("TEST TEST");

function Test(){
var test = $(event.currentTarget).data('section');
alert(test);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input onclick="Test();" type="button" value="test" data-section="thisSection"/>
</div>

Примечание. Используемая здесь переменная window.event недовольна новым кодом.

Answer 2

$('#testOut').val("TEST TEST");

function Test(selector){
	var test = selector.data('section');
  alert(test);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input onclick="Test($(this));" type="button" value="test" data-section="thisSection"/>
</div>

Answer 3

function Test(btn){
var test = $(btn).attr("data-section");
alert(test);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input onclick="Test(this);" type="button" value="test" data-section="thisSection" />
</div>

Проблема в вашем селекторе. «$ (this)» в вашем примере возвращает ссылку на функцию Test. Вместо этого передайте это функции и выберите off переданного значения.
Кроме того, я бы использовал функцию jQuery attr () для установки и возврата значений в пользовательском свойстве.

Answer 4

Ваша функция передается в объект "Window", вам нужно уточнить, через что вы проходите.

Для получения атрибута раздела данных вы можете использовать метод .getAttribute () для элемент. Он работает аналогично .setAttribute ().

https://www.w3schools.com/jsref/met_element_getattribute.asp