Jquery 在Safari中不工作

我有一个html div，它显示在页面中，取决于url，如果它匹配，则该div将显示在除Safari之外的所有浏览器中

');

$(yeah).appendTo('body').delay(1000).fadeIn(2200);

我确实通过append方法调用了它。先谢谢你

var yeah = $('
  <div class="proactive-chat-container right-bottom" id="proactive-chat">
  <div class="panel panel-info" id="proactive-chat-popover">
    <div class="panel-heading">
      <div class="panel-media trycss" style="transition-delay: 0.1s; display: block;">
        <a href="#"><img src="/media/13583787/1.jpg" style="margin-top: -7px"></a>
      </div>
      <div class="panel-header">
        <h4 class="panel-title">Trend Micro Support</h4>
        <p class="panel-subtitle" id="proactive-chat-status">Usually replies in few minutes</p>
      </div>
      <div class="panel-heading-button">
        <i aria-hidden="true" class="fa fa-close"></i>
      </div>
    </div>
    <div class="panel-body" id="proactive-chat-message">
      <div class="proactive-chat-message-content">
        <p>' + msg + '</p>
      </div>
      <div class="panel-footer">
        <a class="btn chat-with-us" id="testSecond">
          <span>Chat with us</span>
        </a>
      </div>
    </div>
    <div class="panel-body" id="two" style="display: none">
      <div class="proactive-chat-message-content">
        <p>Please enter your information</p>
        <form id="frmENCONS" name="frmENCONS" onsubmit="return false">
          <div id="hiddenFieldContainer">
            <input id="txtPhoneNumber" name="txtPhoneNumber" type="hidden" value="">
            <input id="txtSerialNumber" name="txtSerialNumber" type="hidden" value="">
            <input id="ddlProductName" name="ddlProductName" type="hidden" value="GENERIC PRODUCT">
            <input id="hidAccessID" name="hidAccessID" type="hidden" value="ENCONS">
            <input id="ddlCountry" name="ddlCountry" type="hidden" value="' + _countryName + '">
            <input id="ddlOperatingSystem" name="ddlOperatingSystem" type="hidden" value="N/A">
            <input id="txtProblemDescription" name="txtProblemDescription" type="hidden" value="">
            <input id="hidLanguage" name="hidLanguage" type="hidden" value="English">
            <input id="hidGIC" name="hidGIC" type="hidden" value="ZZZZZZZZZ">
            <input id="hidVersionName" name="hidVersionName" type="hidden" value="Not Available">
            <input id="hidInternetConnName" name="hidInternetConnName" type="hidden" value="Not Available">
            <input type="hidden" id="hidRefUrl" name="hidRefUrl" value="' + window.location.href + '">
            <input id="hidUrlFrom" name="hidUrlFrom" type="hidden" value="">
            <input id="hidCountryCode" name="hidCountryCode" type="hidden" value="' + _countryCode + '">
        </div>
        <div class="form-group has-feedback">
          <label class="control-label" for="txtFirstName">First Name</label>
          <input class="form-control" id="txtFirstName" name="txtFirstName" onchange="checkFname(this.value)" placeholder="First Name" required type="text">
          <span class="form-control-feedback glyphicon glyphicon-ok"></span>
        </div>
        <div class="form-group has-feedback">
          <label class="control-label" for="txtLastName">Last Name</label>
          <input class="form-control" id="txtLastName" name="txtLastName" onchange="checkLname(this.value)" placeholder="Last Name" required type="text">
          <span class="form-control-feedback glyphicon glyphicon-ok"></span>
        </div>
        <div class="form-group has-feedback">
          <label class="control-label" for="txtEmailAddress">Email Address</label>
          <input class="form-control" id="txtEmailAddress" name="txtEmailAddress" onkeyup="checkEmail(this.value);" placeholder="Email Address" required type="email">
          <span class="form-control-feedback glyphicon glyphicon-ok"></span>
        </div>
      </form>
    </div>
    <div class="panel-footer">
      <a class="btn" onclick="submitForm(event)">
        <span>Start Chat</span>
      </a>
    </div>
  </div>
</div>
<div class="panel panel-info hide" id="proactive-chat-alert">
  <div class="panel-body text-center">
    <h4>Trend Micro Support</h4>
    <br>
    <br>
    <p class="proactive-loading">
      <img src="/media/13583778/proactive-icon-loading.gif">
    </p>
    <br>
    <div class="proactive-chat-alert-icon">
    <p>
      <img src="/media/13583760/proactive-icon-primary.png">
    </p>
  </div>
  <br>
  <p class="proactive-loading-state">Our Support Representative will be with you shortly.
  </p>
</div>

');

$(yeah).appendTo('body').delay(1000).fadeIn(2200);

---

首先，建议分解风险值-它是什么？它看起来像一个html字符串，但被称为选择器，推荐的方法是：

$（'body'）。append（htmlStr）

您是否考虑过像handlebar或ReactJS这样的模板解决方案？这种内联html有点疯狂。“取决于url是否匹配”-当然，您已经验证了Safari中出现错误的并不是这个检查…？@ThisgyHasTwoThumbs-这就是您在jQuery中创建文档片段的方式，如果有点误导，那么它是完全有效的（而不是模板）.@JaredFarrish啊，我明白了-这看起来真是一件奇怪的事，哈哈