为何无序列表内锚点的点击事件无法触发？

Got it, let's break down why your click events aren't firing and fix this step by step.

First off, the biggest issue here is that you're using the same id="cos-anch" for multiple anchor elements—HTML rules state that IDs must be unique within a document. Browsers treat IDs as singular identifiers, so when you try to bind an event using that ID, it only attaches to the first element it finds with that ID. All the other anchors are completely ignored for event binding, which is why clicking them does nothing.

Let's fix this with a few solid solutions:

Solution 1: Switch to Using Classes (Recommended) #

Replace the duplicate IDs with a class instead, since classes are designed to be reused across multiple elements.

First, update your HTML:

<li><a class="cos-anch" href="#teeth_whitening">Teeth Whitening</a></li>
<li><a class="cos-anch" href="#porcelain_veneers">Porcelain Veneers</a></li>
<li><a class="cos-anch" href="#bonding">...</a></li>

Then bind the click event using the class selector. Here's how to do it with vanilla JavaScript:

// Get all elements with the class
const anchors = document.querySelectorAll('.cos-anch');

// Loop through each anchor and attach the click event
anchors.forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    // Your reporting logic here
    console.log('Anchor clicked, sending report...');
    // Optional: If you need to prevent default anchor behavior (like scrolling)
    // e.preventDefault();
  });
});

If you're using jQuery, it's even simpler:

$('.cos-anch').on('click', function() {
  // Your reporting code here
  console.log('Report triggered');
});

Solution 2: Use Event Delegation (Even Better for Dynamic Content) #

If your menu items might be added dynamically (e.g., loaded via AJAX), event delegation is a more robust approach. Instead of binding events directly to each anchor, you bind the event to a parent element (like the <ul> that contains these <li> items), and listen for clicks on its child anchors.

Assuming your menu is inside a <ul> with an ID like cosmetic-menu, here's the vanilla JS version:

<ul id="cosmetic-menu">
  <li><a href="#teeth_whitening">Teeth Whitening</a></li>
  <li><a href="#porcelain_veneers">Porcelain Veneers</a></li>
  <li><a href="#bonding">...</a></li>
</ul>

const menu = document.getElementById('cosmetic-menu');

menu.addEventListener('click', function(e) {
  // Check if the clicked element is an anchor inside the menu
  if (e.target.tagName === 'A') {
    e.preventDefault(); // Optional, if you need to stop scrolling first
    // Your reporting logic
    console.log('Report sent for:', e.target.textContent);
    // If you still want the anchor to scroll to the section, do this after reporting
    document.querySelector(e.target.getAttribute('href')).scrollIntoView();
  }
});

This way, any new anchors added to the menu later will automatically trigger the event without needing to re-bind it.

Quick Check to Confirm the Issue #

To verify that the duplicate ID is the problem, try running this in your browser's console:

console.log(document.getElementById('cos-anch'));

It will only log the first anchor element, proving that the rest are not being selected with that ID.

That should get your click events firing for all anchors and your reporting working as expected!

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