Jquery HTML() 在除一个页面之外的所有页面上工作？

Question

该脚本从 FAQ 页面中提取内容并将其注入模态。

该脚本适用于所有内容，但购物车页面、所有控制台日志都会触发，我的响应成功返回，但 .html() 不会将响应添加到 DOM。

<div id="SafetyPolicyModal" class="safety-policy-modal">
  <div class="modal-content">
    <div class="close-btn" safety-modal-close-btn>&times;</div>
    <div class="content-render-section"></div>
  </div>
</div>

<script>
  $(document).ready(function(){
    $('.container').on('click','[safety-policy-link]',function(e){
      e.preventDefault();
      console.log('1')
      $("#SafetyPolicyModal").css("display", "block");
      console.log('2')
    });

    $(document).on('click','[safety-modal-close-btn]',function(e){
      e.preventDefault();
      $("#SafetyPolicyModal").css("display", "none");
    });

   
    $.ajax("/pages/safety-liability?view=no-index").then(response => {
      console.log("!!!!!!")
      $(".content-render-section").html(response);
      console.log(response)
      console.log('done')
    })
  });
</script>

Answer 1

我的猜测是这个特定页面有多个元素 class content-render-section而你想要定位的不是第一个。

特定于您的选择器以定位正确的选择器。 仅供参考，您可以使用 jQuery 的.load()方法使代码更简单

// Target the content-render-section within your modal
$("#SafetyPolicyModal .content-render-section")
  .load("/pages/safety-liability?view=no-index");