Обработчики событий JQuery - что такое «лучший» метод
В чем разница между следующими способами подключения обработчика событий в JQuery?
(function () {
var $body = $("body");
$('button').click(function () {
console.log(this) + " - 1";
});
$('button').on('click', function () {
console.log(this) + " - 2";
});
$(document).on('click', 'button', function () {
console.log(this) + " - 3";
});
$body.on('click', 'button', function () {
console.log(this) + " - 4";
});
$body.find('button').on('click', function () {
console.log(this) + " - 5";
});
})();
Я нашел несколько случаев, когда один, кажется, работает, а другой нет. НапримерОбработчик 2 ниже, делаетне работать покаОбработчик 1 делает. Для того, чтобы сделать эту работу, мне пришлось реализоватьОбработчик 3 что, очевидно, менее эффективно.
$retrieveCust = $("#bxRetrieveCustomer");
// Handler 1
$retrieveCust.find(".icoX").on("click", function () {
// DO SOMETHING
});
// Handler 2
$retrieveCust.find(".tag-open").on("click", function () {
// DO SOMETHING
});
// Handler 3
$(document).on("click", ".tag-open", function (event) {
// DO SOMETHING
});
Вот HTML
<div class="box" id="bxRetrieveCustomer">
<h1>RETREIVE CUSTOMER</h1>
<div class="icoX">X</div>
<div class="box-liner10">
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Date of Birth</th>
<th>Email</th>
<th>password</th>
<th></th>
</tr>
<!-- ko foreach: Customers -->
<tr>
<td data-bind="text: FirstName"></td>
<td data-bind="text: LastName"></td>
<td data-bind="text: DateOfBirth"></td>
<td data-bind="text: Email"></td>
<td data-bind="text: Pwd"></td>
<td><a class="tag-open"></a></td>
</tr>
<!-- /ko -->
</table>
</div>
</div>