JQuery事件处理程序 - 什么是“最佳”方法

Question

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一样。为了完成这项工作，我必须实现Handler 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>

Answer 1

如果你想要最好我可以推荐使用.on（）因为你可以创建某种泛型方法，通过传递参数（即事件名称）也可以重用于其他事件。我通常使用.on（）