Доступ свойств кнопки внутри его Обработчика события щелчка

Кнопки:Доступ свойств кнопки внутри его Обработчика события щелчка

<button class='button pasteButton' id='pasteButton1'>Button Label</button>

нажмите обработчик кнопки:

$(document).on('click','.pasteButton',function(e){ 

    //alert("paste clicked"); 
    alert(this.id); 

    e.preventDefault(); 
});

Я могу получить кнопки он id внутри обработчика щелчка с вышеизложенным код. Как я могу получить значение кнопки (т. Е. «Ярлык кнопки») или какое-либо другое свойство внутри обработчика кликов?

(И пока мы на эту тему, почему это, что с JQuery иногда нам нужно сделать: this (например, выше), и в других случаях мы должны сделать: $(this) ... есть простое объяснение разницы пожалуйста

источник

2015-12-23 thanks_in_advance

Если вы хотите, чтобы получить текст, либо получить доступ к textContent property на DOM element:

this.textContent // Button Label

Или использовать JQuery .text() method:

$(this).text() // Button Label

Почему, что с JQuery иногда нам нужно сделать: this (например, выше), и в других случаях нам нужно сделать: $(this)

В этом случае this является DOM element, тогда как $(this) - это jQuery object.

Родные элементы DOM имеют такие свойства, как value, id, textContent.

this.id // pasteButton1 
this.textContent // Button Label

Стоит отметить, что вы не можете методы использования JQuery непосредственно на элементы DOM, и именно поэтому вы заключаете this с $() для того, чтобы превратить его в объект JQuery.

$(this).prop('id') // pasteButton1 
$(this).text() // Button Label

источник

2015-12-23 02:04:01

Спасибо очень очень много. Очень хорошо прояснил ситуацию. Огромная помощь. Мне хотелось бы, чтобы какая-то номенклатура не отличалась от DOM и jQuery. (Например, в HTML, я думаю, мы ссылаемся на метку элемента кнопки как на ее значение). И в ссылке, которую вы предоставили для документации метода '.text()', слово «кнопка» не отображается на странице, поэтому для полуновичка, такого как я, становится очень трудно понять подключение. –

@ user1883050 Я рад, что помог. Как и большинство вещей, я думаю, что это просто требует практики :) –

'1' для объяснения. – shakhawat

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#mButton").click(function(){ 
     alert("name:"+ $(this).attr("value")); 
    }); 
}); 
</script> 
</head> 
<body> 

<input id="mButton" type = "button" value="submit"/> 

</body> 
</html>

DEMO

источник

2015-12-23 02:11:55 shakhawat

Доступ свойств кнопки внутри его Обработчика события щелчка

ответ

Смежные вопросы