类更改后调用旧动作的元素

Question

我有一个p元素，当我单击时我想更改它的类（从A到B）。我可以看到类确实发生了变化，但是当我单击该元素时，它将继续在A而不是B上调用操作。

我虽然是因为我一直在做，但是即使使用on也无法使它正常工作。

        <p class='a'>Class is A</p>

        $(".a").on("click", function(e){

            alert("A");
            $(this).removeClass("a");
            $(this).addClass("b");
            $(this).html("Changed to B");
        });

        $(".b").on("click", function(e){

            alert("B");

        });