1

我有一些简单的代码。我正在使用Jquery. 我有两个元素，它们分配了一个特定的类 a。其中之一也被分配了类b1。

b1 类有一个onclick属性。

现在我放置一个按钮，单击该按钮时会尝试从所有元素中删除类 b1 。但即使在那之后，我看到点击功能仍然有效。

有人可以解释一下吗？我在jsfiddle上有我的代码

我观察到只有 CSS 属性被添加。与这些元素相关的 javascript 事件没有到位。

<body>
    <table>
        <tr>
            <td class="a b1" id="cell1">Cell 1</td>
            <td class="a b2" id="cell2">Cell 2</td>
        </tr>
    </table> <a href="#" id="click1">Remove B1 </a>
    <br/>
</body>

<script>
    $(document).ready(function() {

    $(".b1").click(function () {

            alert("B1");

        });

        $("#click1").click(function () {
            alert("removed b1");

            $(".a").removeClass('b1');
              alert("removed b1 from all elements. ");

    //even after executing this statment - the onclick still remains active.

        });
    });
</script>
4

3 回答 3

2

$(".b1")返回元素并将.click()事件处理程序附加到元素本身。选择器不是“动态的”。您正在寻找的是事件委托：

$('table').on('click', '.b1', function() {
    ...
});

这会将事件处理程序附加到table元素，然后将其委托给与该选择器匹配的子元素。

于 2013-03-24T08:05:19.230 回答
2

您将onclick事件处理程序附加到与选择器匹配的元素。选择器只是抓取元素的集合，然后将其应用于它们，您不能将事件处理程序应用于类。

你可以做这样的事情，只在类存在时运行处理程序。

$(".b1").click(function () {
    if ($(this).hasClass('b1')) {
        alert("B1");
    }
});
于 2013-03-24T08:04:26.793 回答
1

JavaScript 在此实例中的工作方式是，一旦文档准备就绪，它会将侦听器添加到适当的 DOM 对象。（所以在这种情况下，它会将点击侦听器添加到文档完成加载时具有类 b1 的所有标签）。即使您在文档加载完成后更改了类，侦听器仍会查找原始标签。

为了使函数仅在当前选定的元素上运行，请尝试on()函数

于 2013-03-24T08:11:39.597 回答