Jquery 点击事件对插入的元素不起作用

Question

我对替换的 HTML 元素有疑问。

我在书签 svg 图标上使用 jquery 将其替换为某些 div 元素上的填充/未填充书签。

下面的代码在我的 html 文件中已有的 html 元素上运行良好，但是单击事件不会在替换的 SVG 元素上触发。

  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> ';
     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>' ;
   $( " .bi-bookmark" ).click(function() {
    
    
//  console.log($(this));
//  console.log($(this)[0]['classList'][1]);
    $(this).replaceWith(bookmark_Filled);
  });


 
 $( ".bi-bookmark-fill" ).click(function() {
  
  
     $(this).replaceWith(bookmark_Unfilled);
 });

我可能遗漏了一些东西，你能帮帮我吗？ 我的 html 文件中有几个书签我总是想更改被点击的书签的值。

Answer 1

您可以使用点击语法文档来触发点击动态元素。

$(document).on("click", ".bi-bookmark, .bi-bookmark-fill", function() {
// your code here
});

我还建议另一种方法。将两个 SVG 放在一个容器中。默认显示一个。单击通过切换类显示其他图标。那会简单得多。这样您就不必替换内容。