Question

为什么div＃1不会改变文本。我做错了什么？

<div id="1" class="a" style="width: 300px;height: 300px; background-color: #003366"></div>
<div id="2" class="b" style="width: 300px;height: 300px; background-color: #003366"></div>

<script>
$(document).ready(function(){
    $(".b").click(function(){
       $(this).text("hello");
    });

    $(".a").mouseover(function(){
      $(this).addClass("b");
    });
});
</script>

Answer 1

事件处理程序被添加到与当时选择器匹配的元素，稍后更改选择器不会神奇地使事件处理程序工作。

您可以为此

使用委派的事件处理程序

$(document).ready(function(){
    $(document).on("click", ".b", function(){
       $(this).text("hello");
    });

    $(".a").mouseover(function(){
      $(this).addClass("b");
    });
});

但是你为什么要这样做，只有在同一个元素被悬停之后激活一个点击处理程序似乎是一个奇怪的模式，因为你不可能点击它，除非鼠标悬停在它上面？

Answer 2

试试这个

$("body")
.on('click', '.a', function (){
   $(this).addClass("b");
})
.on('click', '.b', function (){
    $(this).text("hello");
})

在.addClass之后，JQuery事件不起作用

2 个答案: