Jquery click event have to click twice

Question

I'm using the POPR Jquery plugin to get a simple pop-up menu. While the script is working fine, i always have to click twice to activate my pop-up. How can i get it to work with a single click?

(function($) {

     $.fn.popr = function(options) {

          var set = $.extend( {

               'speed'        : 200,
               'mode'         : 'bottom'

          }, options);

          return this.each(function() {

               var popr_cont = '.popr_container_' + set.mode;
               var popr_show = true;

               $(this).click(function(event)
               {
                    $('.popr_container_top').remove();
                    $('.popr_container_bottom').remove();

                    if (popr_show)
                    {
                         event.stopPropagation();
                         popr_show = false;
                    }
                    else
                    {
                         popr_show = true;
                    }

                    var d_m = set.mode;

                    var id = $j(this).closest('td').siblings(':first-child').text();

                    var but_log     = '<button title="Logs" type="button" id="log" value="'+ id +'" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-info-sign"></span></button>';
                    var but_del     = '<button title="Verwijder Contract" type="button" id="rem" value="'+ id +'" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-remove"></span></button>';
                    var but_edi     = '<button title="Bewerk Contract" type="button" id="edit" value="'+ id +'" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-pencil"></span></button>';
                    var but_verl_nu     = '<button title="Verleng vanaf nu" type="button" id="verlengvanafnu" value="'+ id +'" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-upload"></span></button>';
            var but_verl_eind   = '<button title="Verleng vanaf contract eind" type="button" id="verlengvanafeind" value="'+ id +'" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-ok"></span></button>';

                    var out = '<div class="popr_container_' + d_m + '"><div class="popr_point_' + d_m + '"><div class="popr_content">'+ but_verl_nu + but_verl_eind + but_edi + but_del + but_log +'</div></div></div>';

                    $(this).append(out);

                    var w_t = $(popr_cont).outerWidth();
                    var w_e = $(this).width();
                    var m_l = (w_e / 2) - (w_t / 2);

                    $(popr_cont).css('margin-left', m_l + 'px');
                    $(this).removeAttr('title alt');

                    $(popr_cont).fadeIn(set.speed);
               });

               $('html').click(function()
               {
                    $('.popr_container_top').remove();
                    $('.popr_container_bottom').remove();

                    popr_show = true;
               });                           
          });
     };

})(jQuery);

I'm sorry i see i missed a little part of the script.

The popr is used to get options on a huge datagrid.

The piece of script i use to activate the popr is:

        $(document).ready(function() {
            $('.popr').popr();
    });

       $("#datagrid").on("click", "td", function(){
            $( this ).popr();
        });

When i use:

 $("#datagrid").on("click", "td", function(){
alert('Feugait');
});

It works in a single click.

Link to the plug-in: http://www.tipue.com/popr/

Answer 1

Works for me using the documentation and demo - answering here for formatting reasons.

NOTE I left the minified POPR minified since it is only here because there is no CDN for it.

 // no need to format this. It is the minified version of the POPR code (function($){$.fn.popr=function(options){var set=$.extend({'speed':200,'mode':'bottom'},options);return this.each(function(){var popr_cont='.popr_container_'+set.mode;var popr_show=true;$(this).click(function(event) {$('.popr_container_top').remove();$('.popr_container_bottom').remove();if(popr_show) {event.stopPropagation();popr_show=false;} else {popr_show=true;} var d_m=set.mode;if($(this).attr('data-mode')) {d_m=$(this).attr('data-mode') popr_cont='.popr_container_'+d_m;} var out='<div class="popr_container_'+d_m+'"><div class="popr_point_'+d_m+'"><div class="popr_content">'+$('div[data-box-id="'+$(this).attr('data-id')+'"]').html()+'</div></div></div>';$(this).append(out);var w_t=$(popr_cont).outerWidth();var w_e=$(this).width();var m_l=(w_e / 2)-(w_t / 2);$(popr_cont).css('margin-left',m_l+'px');$(this).removeAttr('title alt');if(d_m=='top') {var w_h=$(popr_cont).outerHeight()+39;$(popr_cont).css('margin-top','-'+w_h+'px');} $(popr_cont).fadeIn(set.speed);});$('html').click(function() {$('.popr_container_top').remove();$('.popr_container_bottom').remove();popr_show=true;});});};})(jQuery); // ACTUAL INVOCATION: $(function() { $('.popr').popr(); }); 

 /* Popr 1.0 Copyright (c) 2015 Tipue Popr is released under the MIT License http://www.tipue.com/popr */ .popr { cursor: pointer; } .popr a { color: #333; text-decoration: none; border: 0; } .popr-box { display: none; } .popr_content { background-color: #fff; padding: 7px 0; margin: 0; } .popr-item { font: 300 14px/1.7 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #333; padding: 4px 29px 5px 29px; } .popr-item:hover { color: #333; background-color: #dcdcdc; } .popr_container_bottom { display: none; position: absolute; margin-top: 10px; box-shadow: 2px 2px 5px #f9f9f9; z-index: 1000; } .popr_container_top { display: none; position: absolute; box-shadow: 2px 2px 5px #f9f9f9; z-index: 1000; } .popr_point_top, .popr_point_bottom { position: relative; background: #fff; border: 1px solid #dcdcdc; } .popr_point_top:after, .popr_point_top:before { position: absolute; pointer-events: none; border: solid transparent; top: 100%; content: ""; height: 0; width: 0; } .popr_point_top:after { border-top-color: #fff; border-width: 8px; left: 50%; margin-left: -8px; } .popr_point_top:before { border-top-color: #dcdcdc; border-width: 9px; left: 50%; margin-left: -9px; } .popr_point_bottom:after, .popr_point_bottom:before { position: absolute; pointer-events: none; border: solid transparent; bottom: 100%; content: ""; height: 0; width: 0; } .popr_point_bottom:after { border-bottom-color: #fff; border-width: 8px; left: 50%; margin-left: -8px; } .popr_point_bottom:before { border-bottom-color: #dcdcdc; border-width: 9px; left: 50%; margin-left: -9px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="popr" data-id="1">Feugait nostrud</div> <div class="popr-box" data-box-id="1"> <a href="#"><div class="popr-item">Feugait delenit</div></a> <a href="#"><div class="popr-item">Vero dolor et</div></a> <a href="#"><div class="popr-item">Exerci ipsum</div></a> </div>