Question

我正在尝试为每个表格单元格创建这些小弹出菜单，但console.log("OK")执行的次数比实际执行的次数多{> 1}。事件发生。我在这里做错了什么？

HTML：

<table>
    <tr>
        <td><div class="popup"></div></td>
        <td><div class="popup"></div></td>
    </tr>
    <tr>
        <td><div class="popup"></div></td>
        <td><div class="popup"></div></td>
    </tr>
</table>

使用Javascript：

$(document).ready(function () {

    $("td").live('click', function (e) {

        $(this).find(".popup").fadeIn("fast");

        $(".popup").on('click', function (e) {
            console.log("OK");
        });

        return false;

    });

    $("html").on('click', function (e) {
        $(".popup").fadeOut("fast");
    });

});

http://jsfiddle.net/V9XQm/

Answer 1

您需要在.popup元素的点击处理程序之外移动td div的点击处理程序：

$(document).ready(function () {

    $("td").live('click', function (e) {
        $(this).find(".popup").fadeIn("fast");
        return false;
    });

    $(".popup").on('click', function (e) {
        console.log("OK");
    });

    $("html").on('click', function (e) {
        $(".popup").fadeOut("fast");
    });

});

<强> Updated Fiddle

另请注意，自.live()版以来1.7已被弃用，版本1.9已删除{{1}}。您应该使用 .on() 代替

代码执行的次数比预期的多

1 个答案: