第二次加载后jQuery HTML替换动态加载的Ajax内容

时间：2017-03-29 21:24:01

标签： javascript jquery ajax

经过大约20个小时的强迫性搜索后，我设法在执行动态内容后应用文本替换开始工作以应用于动态内容。

$("body").one("mouseover", "span.help-more", function(index) {
    $('li#li').each(function(index) {
        var $this = $(this);
        var t = $this.text();
        $this.html(t.replace("&lt", "<").replace("&gt", ">"));
    });
});

但是，一旦在第二次或之后的任何时间再次检索到动态内容，则不再替换该文本。

我试图通过删除＆＃34;一个＆＃34;来解决这个问题（参见下面的例子）。并使用＆＃34; on＆＃34;进行更改，然后复制代码以撤消事件（撤消t.replace），但这不起作用。

$("body").on("mouseover", "span.help-more", function(index) {
    $('li#li').each(function(index) {
        var $this = $(this);
        var t = $this.text();
        $this.html(t.replace("&lt", "<").replace("&gt", ">"));
    });
});

$("body").on("mouseout", "span.help-more", function(index) {
    $('li#li').each(function(index) {
        var $this = $(this);
        var t = $this.text();
        $this.html(t.replace("<", "&lt").replace(">", "&gt"));
    });
});

有人可以帮帮我吗？到目前为止，我已经给了这个约20个小时的时间。我对任何解决方案都很满意。

我应该提一下：我会在＆＃34;上运行它，然后以某种方式将HTML标签在第二次执行时剥离，这就是为什么我试图执行，撤消。

如果有的话，我会很高兴： - （1）＆＃34;一个＆＃34;每次点击后都会被激活 - （2）＆＃34; on＆＃34;如果我可以撤消onmouseout上的更改 - （3）＆＃34; on＆＃34;它会在第二次运行时停止剥离标签 ..或任何您认为有效的选项..

非常感谢您的帮助！

编辑：如果这有助于相关HTML： 

    <ul>
    <li class="stone-list ng-scope" id="stone_913"><span class="check-span"><span class="check-span-botton"></span></span> <span class="shape-span ng-binding">pear</span> <span class="carat-span ng-binding">0.5</span> <span class="cut-span ng-binding">excellent</span> <span class="colour-span ng-binding">G</span> <span class="clarity-span ng-binding">VS2</span> <span class="price-span" content="stone.price" dir=""><span class="ng-scope">$ 1412</span></span> <span class="help-span"><span class="help-more"><span class="information-help-more"><span class="top-help-more"></span> <span class="center-help-more"></span></span></span></span></li>
</ul>
<ul>
    <!-- ngRepeat: row in stone.tooltrip -->
    <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Shape pear</span></li><!-- end ngRepeat: row in stone.tooltrip -->
    <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Carat Weight 0.5</span></li><!-- end ngRepeat: row in stone.tooltrip -->
    <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Clarity VS2</span></li><!-- end ngRepeat: row in stone.tooltrip -->
    <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Color G</span></li><!-- end ngRepeat: row in stone.tooltrip -->
    <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Color Shade WH</span></li><!-- end ngRepeat: row in stone.tooltrip -->
    <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Cut excellent</span></li><!-- end ngRepeat: row in stone.tooltrip -->
    <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Polish VG</span></li><!-- end ngRepeat: row in stone.tooltrip -->
    <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Symmetry VG</span></li><!-- end ngRepeat: row in stone.tooltrip -->
    <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Fluoresence N</span></li><!-- end ngRepeat: row in stone.tooltrip -->
    <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Depth (%) 62.5</span></li><!-- end ngRepeat: row in stone.tooltrip -->
    <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Table (%) 61</span></li><!-- end ngRepeat: row in stone.tooltrip -->
    <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Certificate Type</span></li><!-- end ngRepeat: row in stone.tooltrip -->
    <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Number 6255152356</span></li><!-- end ngRepeat: row in stone.tooltrip -->
    <li class="ng-binding ng-scope" id="li"><span class="center-help-more"><a href="[link]" style="color:yellow">Video Link</a></span></li>
    <li style="list-style: none"><span class="center-help-more"><!-- end ngRepeat: row in stone.tooltrip --></span></li>
</ul><span class="bottom-help-more"></span> <span class="change-span"><span class="change-span-botton">Choose</span></span>
<ul></ul>

由WordPress取代的一些糟糕的html标签导致我找到了解决方法。

1 个答案:

答案 0 :(得分：0)

要修复的数量。这是一个工作示例：https://jsfiddle.net/Twisty/3cp2kddm/

<强> HTML 

<ul>
  <li class="stone-list ng-scope" id="stone_913">
    <span class="check-span">
    <span class="check-span-botton"></span>
    </span>
    <span class="shape-span ng-binding">pear</span>
    <span class="carat-span ng-binding">0.5</span>
    <span class="cut-span ng-binding">excellent</span>
    <span class="colour-span ng-binding">G</span>
    <span class="clarity-span ng-binding">VS2</span>
    <span class="price-span" content="stone.price" dir="">
    <span class="ng-scope">$ 1412</span>
    </span>
    <span class="help-span">
    <span class="help-more">
      <span class="information-help-more ui-icon ui-icon-info">
        <span class="top-help-more"></span>
    <span class="center-help-more"></span>
    </span>
    </span>
    </span>
  </li>
</ul>
<ul>
  <!-- ngRepeat: row in stone.tooltrip -->
  <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Shape pear</span></li>
  <!-- end ngRepeat: row in stone.tooltrip -->
  <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Carat Weight 0.5</span></li>
  <!-- end ngRepeat: row in stone.tooltrip -->
  <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Clarity VS2</span></li>
  <!-- end ngRepeat: row in stone.tooltrip -->
  <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Color G</span></li>
  <!-- end ngRepeat: row in stone.tooltrip -->
  <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Color Shade WH</span></li>
  <!-- end ngRepeat: row in stone.tooltrip -->
  <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Cut excellent</span></li>
  <!-- end ngRepeat: row in stone.tooltrip -->
  <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Polish VG</span></li>
  <!-- end ngRepeat: row in stone.tooltrip -->
  <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Symmetry VG</span></li>
  <!-- end ngRepeat: row in stone.tooltrip -->
  <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Fluoresence N</span></li>
  <!-- end ngRepeat: row in stone.tooltrip -->
  <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Depth (%) 62.5</span></li>
  <!-- end ngRepeat: row in stone.tooltrip -->
  <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Table (%) 61</span></li>
  <!-- end ngRepeat: row in stone.tooltrip -->
  <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Certificate Type</span></li>
  <!-- end ngRepeat: row in stone.tooltrip -->
  <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Number 6255152356</span></li>
  <!-- end ngRepeat: row in stone.tooltrip -->
  <li class="ng-binding ng-scope" id="li"><span class="center-help-more"><a href="[link]" style="color:yellow">Video Link</a></span></li>
  <li style="list-style: none"><span class="center-help-more"><!-- end ngRepeat: row in stone.tooltrip --></span></li>
</ul><span class="bottom-help-more"></span> <span class="change-span"><span class="change-span-botton">Choose</span></span>
<ul></ul>

<强>的JavaScript 

$(function() {
  $(".stone-list").on("mousein mouseenter mouseleave mouseout", ".help-more", function(e) {
    $('.ng-binding').each(function(ind, el) {
      var $this = $(el);
      var t = $this.prop("innerHTML");
      console.log("HTML Content: ", t);
      if (e.type == "mouseleave") {
        t = t.replace(/&lt;/g, "<");
        t = t.replace(/&gt;/g, ">");
      } else {
        t = t.replace(/</g, "&lt;");
        t = t.replace(/>/g, "&gt;");
      }
      console.log("HTML Converted: ", t.toString());
      $this.html(t);
    });
  });
});

首先，您的几乎所有id元素都有非唯一#li属性li。这会使您的.each()功能失效。 id属性应该是唯一的。我建议<li id="li-1"></li>每个ID都有一个唯一的编号。

其次，我假设您的脚本在<span class="help-more"></span>内部有一些对象或图像，以便用户可以将鼠标悬停在它上面。我在我的例子中使用了jQuery UI来做到这一点。由于事件在不同浏览器中的措辞可能不同，我建议绑定其中的一些。然后根据您要查找的事件有条件地执行操作。这可以通过以下方式完成：

$( selector ).on( "mouseenter mouseleave", handlerInOut );

如果您要将<或>替换为其HTML实体，&lt;和&gt;，请确保您使用的是正确的实体。您的替换功能在全球范围内无效;因此，它只取代了第一次出现。切换到带有全局标志的正则表达式会解决此问题。

t = t.replace(/</g, "&lt;");
t = t.replace(/>/g, "&gt;");

调用.text()只会获得实际的文本值，而不是HTML值。建议使用.html()或.prop("innerHTML")。两者都提供相同的结果。

希望有所帮助。

相关问题
最新问题