Why is .nxt not acting as a selector in JQuery

Question

https://code.sololearn.com/WA77a102a0a1
<ul class="quiz" >
</ul>
<button class="submit " id="submit">go </button>

$('document').ready(function(){

$(".submit").click(function(){
$("#submit").text('something');
$('#submit').addClass("nxt");
$('#submit').removeClass('submit');
// $('.quiz').text('i am working');
//console.log($('#submit').hasClass('nxt'));
});

$(".nxt").click(function(){ //here is problem
console.log($('#submit').hasClass('nxt'));
$('.quiz').text('i am not working');
});
})

<button class="nxt" id="submit">something</button>

While inspecting <button class="nxt" id="submit">something</button>, it is clear that the nxt class is being added to the button by $('#submit').addClass("nxt");.
Then why is the nxt selector not working?

Answer 1

by someone: But then I made some changes to the code
It would help if you didn't modify the referenced code for a day or 2 while waiting for an answer because it is harder to understand your question about code that is different from the code you pasted in content of your question.

If you want to troubleshoot the problems while waiting for an answer, you can copy your code to a new Sololearn code and work on it there so your referenced code stays unchanged.

Here is the code as I look at it now:
$('document').ready(function(){
$(".submit").click(function(){
$("#submit").text('something');
$('#submit').addClass("nxt");
$('#submit').removeClass('submit');
console.log($('#submit').hasClass('nxt'));
$(".nxt").click(function(){ //here is problem
$('.quiz').text('i am not working');
});
});
})

If you want to know why "i am not working" doesn't immediately appear upon the first click of your submit button, it is because you added the nxt class while processing the click event. Your newly created event listeners won't be triggered for events that already happened. In other words, if you click and then bind a listener for click, the new listener function won't be called immediately.