使用jQuery附加到div

Question

Pretty new to Jquery/Ajax/Js. How would i go about binding/delegating the following code to either a container div or the document itself so that when i reload a div(that uses the code) with jquery the code does not break like it currently does in a document.ready();

$.each($(".product-comment"), function (key, value) {

    var showmoreHtml = $(this).html();
    var showlessHtml = showmoreHtml.substr(0, 400);
    if (showmoreHtml.length > 400) {
        $(this).html(showlessHtml).append("<a href='' class='product-comment-more'> (...Show More)</a>");
    } else {
        $(this).html(showmoreHtml);
    }
    $(this).on("click", ".product-comment-more", function (event) {
        event.preventDefault();
        $(this).parent(".product-comment").html(showmoreHtml).append("<a href='' class='sight-comment-less'> (Show less)</a>");
    });
    $(this).on("click", ".product-comment-less", function (event) {
        event.preventDefault();
        $(this).parent(".product-comment").html(showmoreHtml.substr(0, 400)).append("<a href='' class='product-comment-more'> (...Show More)</a>")
    });
}); 

Answer 1

First thing is to place that more/less function to add link in a named function... So you can run it from anywhere in the code. Have all the logic there.

Then, the click handlers (on more and less ) can be defined out of that loop. There is no use to define them more than once, since they are delegated. And make it run the loop in the named function passing a true/false argument to the function.

Finally... On ajaxComplete , run that function again.

So all more/less fixes will be done on load, click and ajaxComplete.

function moreLess(more){
  $.each($(".product-comment"), function (key, value) {

      // Remove any more/less link (if any)
      $(this).find("[class^='product-comment-']").remove();

      // Get the remaining HTML
      var HTML = $(this).html();

      // Decide about the more or less link. If "more" is false,
      if (HTML.length > 400 && more) {
        $(this).html(HTML).append("<a href='' class='product-comment-more'> (Show less)</a>");
      }
      if (HTML.length > 400 && !more) {
        $(this).html(HTML.substr(0, 400)).append("<a href='' class='product-comment-more'> (...Show More)</a>");
      }
      if (HTML.length <= 400) {
        $(this).html(HTML);
      }
  });
}

// On page load execution
moreLess(false);

// On ajax complete execution
$( document ).ajaxComplete(function(){
  moreLess(false);
});

// Click handler for more.
$(".product-comment").on("click", ".product-comment-more", function (event) {
  event.preventDefault();
  moreLess(true)
});

// Click handler for less.
$(".product-comment").on("click", ".product-comment-less", function (event) {
  event.preventDefault();
  moreLess(false)
});

Disclaimer: written quickly and untested... But I'm confidant it will work fine. Feel free to ask questions. ;)