Параметр данных jquery on () - $ (this) относится ко всему документу

Question

При использовании jquery я часто использовал $(this) в событиях, функциях и т. Д.

Недавно я попробовал следующее:

function btn_edit_click (event) {
    alert(event.data.idnum);
}
$(".btn_edit").on("click", { idnum: $(this).attr("title") }, btn_edit_click);

По какой-то причине я получаю заголовок всей страницы, а не элемент (ы), на который ссылается $(".btn_edit"). Я делаю что-то не так, или это ожидаемое поведение?

Answer 1

Ну, это зависит от того, во что вложен этот код.Если ответ ничто, тогда this относится к объекту window.

Если вы ссылались на this внутри обработчика события, тогда this будет ссылаться на элемент, для которого инициировано событие.Но похоже, что вы используете this в глобальном пространстве.

Если вы хотите, чтобы заголовок элемента .btn_edit был доступен в функции обратного вызова, просто обратитесь к this в вашей функции обратного вызова(обратите внимание, как это также упрощает ваш код):

function btn_edit_click (event) {
    alert(this.title);
    //UPDATE: I changed $(this).attr('title') to this.title because it performs much faster
}
$(".btn_edit").on("click", btn_edit_click);

Вот демонстрационная версия: http://jsfiddle.net/gRK3z/

Также здесь есть тест производительности, чтобы показать разницу между использованием .attr('title') и.title: http://jsperf.com/jquery-attr-title-vs-title

Answer 2

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

Лучшее решение может быть:

<script type="text/javascript">
function btn_edit_click (event) {
    alert(event.data.idnum);
}

$('.btn_edit').each(function(k, el)
{
    $(el).on('click', { idnum: $(el).attr('title') }, btn_edit_click);
});
</script>

Answer 3

Контекст this - это не то, что вы ожидаете, как указывали другие. Я думаю, что это менее запутанный и более читаемый способ сделать то, что вы пытаетесь сделать:

$("#parentDiv").delegate(".btn_edit", "click", function (e) {
    btn_edit_click(this.title);
});

Answer 4

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

this в вашей функции будет относиться к элементу, как указано в вашем селекторе, избавляя вас от необходимости передавать объектв первую очередь:

function btn_edit_click (event) {
    alert($(this).attr("title"));
}
$(".btn_edit").on("click", btn_edit_click);

Пример скрипки

Answer 5

В вашем случае вы передаете объект в функцию on, поэтому this - это то, что находится в области видимости.

Если не установлено, this обычно устанавливается вwindow.