sometimes click event doesnt fire?

[ganySA]

Hi

I am using the following bit of code to replicate a "material design" click wave event on a drop down / button.

The problem is that sometimes my nya-bootstrap select does not update the button text - the value in the background is update correctly (ID value) however the actual button text is not. When i remove the code below it works perfectly.

Any idea where the clash could be?

 if ($('body').hasClass('page-md')) { 
        // Material design click effect
        // credit where credit's due; http://thecodeplayer.com/walkthrough/ripple-click-effect-google-material-design       
        var element, circle, d, x, y;
        $('body').on('click', 'a.btn, button.btn, input.btn, label.btn', function(e) { 
            element = $(this);

            if(element.find(".md-click-circle").length == 0) {
                element.prepend("<span class='md-click-circle'></span>");
            }

            circle = element.find(".md-click-circle");
            circle.removeClass("md-click-animate");

            if(!circle.height() && !circle.width()) {
                d = Math.max(element.outerWidth(), element.outerHeight());
                circle.css({height: d, width: d});
            }

            x = e.pageX - element.offset().left - circle.width()/2;
            y = e.pageY - element.offset().top - circle.height()/2;

            circle.css({top: y+'px', left: x+'px'}).addClass("md-click-animate");

            setTimeout(function() {
                circle.remove();      
            }, 1000);
        });
    }

[lordfriend]

I use dropdownToggle.children().eq(0) to query the element inside button for updating button text. You prepend an element inside the button will make it fail to change the text

[ganySA]

Thanks for the update. now i understand... do you have any suggestions?

[lordfriend]

I just wonder why you want to use this bootstrap style component in your 'material design' app. A material design select component should be a preferred.

[ganySA]

Its a material design theme for bootstrap so there is a ripple effect.

I find that the material design angular version is too premature and is missing a lot of basic components.

PS: nice avatar!

[lordfriend]

I think rewrite DOM transverse using native querySelector and querySelectorAll may solve this