digicorp / propeller

Propeller - Develop more, Code less. Propeller is a front-end responsive framework based on Google's Material Design Standards & Bootstrap.
http://propeller.in
MIT License
1.13k stars 139 forks source link

Ripple effect is not working if element is inserted dynamically #29

Closed ThomasOrlita closed 6 years ago

ThomasOrlita commented 7 years ago

When you add an element with class pmd-ripple-effect via javascript, for example:

element.innerHTML = '<button type="button" class="btn pmd-btn-raised pmd-ripple-effect btn-default">Button</button>';

the ripple effect doesn't work. Is there any way to make it work?

ThomasOrlita commented 7 years ago

Ok, by adding this piece of code (copied from propeller.min.js) after inserting the element, the ripple effect works.

$(".pmd-ripple-effect").on("mousedown touchstart",function(a){var b=$(this);$(".ink").remove(),0===b.find(".ink").length&&b.append("<span class='ink'></span>");var c=b.find(".ink");if(c.removeClass("animate"),!c.height()&&!c.width()){var d=Math.max(b.outerWidth(),b.outerHeight());c.css({height:d,width:d})}var e=a.pageX-b.offset().left-c.width()/2,f=a.pageY-b.offset().top-c.height()/2;c.css({top:f+"px",left:e+"px"}).addClass("animate"),setTimeout(function(){c.remove()},1500)})
monika-digicorp commented 6 years ago

@ThomasOrlita In Propeller V1.2, we have enhanced the components by developing jQuery Plugins for each component. So now this issue won't occur. For more details, please refer https://github.com/digicorp/propeller/releases/tag/v1.2.0