1

I am creating elements using:

$(sel).append("html");

I need to apply the dotdotdot plugin to this dynamically created html (which has the class "ellipsis"), but it doesn't seem to go into effect.

$(document).ready(function() {
  $(".ellipsis").dotdotdot({
    ellipsis    : '... ',
    watch: "window"
  });
});

How do I apply the plugin to dynamically created html?

EDIT:

This is working now, but I have another problem. I can see the element's text overflow before dotdodtdot is applied for dynamically created elements. Is there a way to fix this?

Trying to remove "visibility: hidden;" after it its loaded in the callback, but it also does not seem to work:

/*css*/
.invisible {
   visibility: hidden;
}

//js
$(".ellipsis").dotdotdot({
    ellipsis    : '... ',
    watch: "window",
    callback: function() { $(".ellipsis").removeClass("invisible"); }
});
shell
  • 1,867
  • 4
  • 23
  • 39
  • 1
    Apply dotdotdot after the element is added inside DOM. Use the callbacks. – Tushar Jan 25 '17 at 04:54
  • I call dotdotdot after the element is appended with no visible effect. – shell Jan 25 '17 at 05:07
  • Not sure what I changed, I think making the dotdotdot selector a

    , but it looks like it is now working. I think there is a display rule that must be set and p defaults to it.

     – shell Jan 25 '17 at 07:30
  • Note the earlier comment is before the first EDIT, I still am having issues with the display delay between .dotdotdot() after the element's text has been appended. – shell Jan 25 '17 at 22:00

0 Answers0