点击切换链接文本与类后新绑定事件失效问题求助

Hey Alex, I see exactly what's going on here—your click events aren't working after toggling the class because of how jQuery binds event handlers initially. Let's break it down and fix it:

Why Your Current Code Fails #

When you use $('.headProjects').click(...) or $('.homePage').click(...), jQuery binds those event handlers only to the elements that exist in the DOM at the time the code runs.

• When the page loads, your link has the headProjects class, so the first click handler gets attached to it.
• After clicking, you change the class to homePage, but the second handler ($('.homePage').click(...)) was already run on page load—at that point, no elements had the homePage class, so nothing got bound to this link. Worse, the original headProjects click handler is still attached to the element, so clicking again might trigger that old function instead of the one you want.

The Solution: Event Delegation #

The fix here is to use event delegation, which lets you bind events to a parent element that exists on page load, and then listen for events bubbling up from child elements that match your selector (even if those child elements change classes later).

Here's a clean, working version:

Option 1: Separate Delegated Handlers #

// Bind to a parent element (use the closest stable parent instead of document if possible)
$(document).on('click', '.headProjects', function() {
  $(this)
    .text('home')
    .removeClass('headProjects')
    .addClass('homePage');
});

$(document).on('click', '.homePage', function() {
  $(this)
    .text('Projects')
    .removeClass('homePage')
    .addClass('headProjects');
});

Option 2: Single Handler with Class Check #

For even more brevity, you can use a single handler that checks the current class of the element:

$(document).on('click', '.headProjects, .homePage', function() {
  const $link = $(this);
  if ($link.hasClass('headProjects')) {
    $link.text('home').removeClass('headProjects').addClass('homePage');
  } else {
    $link.text('Projects').removeClass('homePage').addClass('headProjects');
  }
});

Key Note #

Instead of using document as the parent, try to use the closest stable parent element that exists when the page loads (like the <ul> that contains your <li>). This is more efficient because the event doesn't have to bubble all the way up to the document.

For example, if your HTML looks like this:

<ul class="nav-menu">
  <li><a href="#" class="headProjects">Projects</a></li>
</ul>

You'd change the delegation to:

$('.nav-menu').on('click', '.headProjects, .homePage', function() {
  // ... same logic as above
});

This approach works because the event is listened for on the parent element, and it checks if the clicked child matches the selector at the time of the click—no matter how many times you toggle the class, it'll always pick up the correct state.

内容的提问来源于stack exchange，提问作者Alex Thunders