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

Question

After about 20 hours of compulsive searching I have managed to get text replace to start working after dynamic content is executed to apply on the dynamic content.

$("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", ">"));
    });
});

However, once dynamic content is once again retrieved the second time or any time after that, the text is no longer replaced.

I tried to get around this (see example below) by removing "one" and changing it with "on", then copying the code to undo the events (reversing the t.replace) but that didn't work.

$("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"));
    });
});

Can someone please help me? I've given this about 20 hours so far. I would be happy with any solutions.

I should mention : I would just run it "on", but then somehow the HTML tags get stripped away upon second execution, that's why I tried to execute, undo.

I would be happy if either: -(1) "one" is refired after every click -(2) "on" if i can undo changes onmouseout -(3) "on" and it stops stripping away tags on second run ..or any option you may suggest that is effective..

Your help would be immensely appreciated!

edit:in case this helps The Relevant 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>

It's some crappy html tag replace by WordPress that's causing me to find a workaround.

Answer 1

Number of fixes to make. Here is a Working Example: 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);
    });
  });
});

First, you have non-unique id attribute #li on almost all of your li elements. This defeats your .each() function. The id attribute should be unique. I would suggest <li id="li-1"></li> where each id has a unique number.

Second, I assume your script has some object or image inside of <span class="help-more"></span> such that the user can mouse over it. I made use of jQuery UI to do this in my example. Since the event could be worded differently in different browsers, I suggest binding to a number of them. Then performing an action conditionally based on the event you are looking for. This can be done with:

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

As you want to replace < or > with their HTML Entities, those being < and > , make sure you're using the right entities. Your replacement function did not work globally; hence, it only replaced the first occurrence. Switching to a regular expression with the global flag addresses this.

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

Calling .text() will only get you the actual text value and not the HTML value. Advise using .html() or .prop("innerHTML") . Both supply the same results.

Hope that helps.