jQuery点击事件对动态插入元素无效问题求助

问题原因 #

你当前用$(".bi-bookmark").click()这类方式绑定事件，只会给页面加载时已存在的元素绑定点击逻辑。当用replaceWith替换SVG后，新生成的元素并没有被绑定任何点击事件，自然无法触发切换。

解决方案1：事件委托（推荐） #

事件委托是把事件绑定到静态父元素（比如document），通过事件冒泡处理动态生成的元素。不管元素是初始存在还是后来新增的，只要匹配选择器就能触发事件。

修改后的代码：

const bookmark_Unfilled = ' <svg xmlns="http://www.w3.org/2000/svg"  width="16" height="16" fill="blue" class="bi bi-bookmark" viewBox="0 0 16 16"> <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"/></svg> ';
const bookmark_Filled = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="blue" class="bi bi-bookmark-fill" viewBox="0 0 16 16"> <path d="M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z"/> </svg>' ;

// 绑定到document，处理所有.bi-bookmark的点击（包括动态生成的）
$(document).on('click', '.bi-bookmark', function() {
  $(this).replaceWith(bookmark_Filled);
});

// 绑定到document，处理所有.bi-bookmark-fill的点击（包括动态生成的）
$(document).on('click', '.bi-bookmark-fill', function() {
  $(this).replaceWith(bookmark_Unfilled);
});

解决方案2：不替换元素，仅修改类与路径（更高效） #

没必要替换整个SVG元素，直接修改元素的类和内部path的d属性即可。这样元素本身未被替换，事件绑定依然有效，性能也更优。

修改后的代码：

// 定义空心/实心书签的路径值
const bookmarkUnfilledPath = "M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z";
const bookmarkFilledPath = "M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z";

// 绑定事件到所有书签元素（包括动态修改类后的）
$(document).on('click', '.bi-bookmark, .bi-bookmark-fill', function() {
  const $el = $(this);
  if ($el.hasClass('bi-bookmark')) {
    // 切换为实心：修改类和路径
    $el.removeClass('bi-bookmark').addClass('bi-bookmark-fill');
    $el.find('path').attr('d', bookmarkFilledPath);
  } else {
    // 切换为空心：修改类和路径
    $el.removeClass('bi-bookmark-fill').addClass('bi-bookmark');
    $el.find('path').attr('d', bookmarkUnfilledPath);
  }
});

内容的提问来源于stack exchange，提问作者András Czeitner