bootstrap - button with onclick function inside tooltip

Question

As stated in title. Im trying to create a tooltip which will have some buttons inside. The problems is with the onclick function, which is somehow not working. This is the actual code I have.

$('#button_nowtime').popover({
            trigger: 'click',
            html: 'true',
            title:  "<b>Čas</b>",
            content: 
            function() {
                var returnstring="",button;
                    for(var i=0; i<files.length; i++){
                        button = document.createElement("a");  
                        button.innerText = fileNametoButtonTime(files[i]);
                        button.onclick = (function() {
                            var currentID = i;
                            return function() { 
                                alert("asd"); currentTimeIndex=currentID;  setNowTimeButton(); drawImage(); $('#button_nowtime').popover('hide');
                            }
                        })();
                        button.href="#";
                        returnstring+=button.outerHTML;
                        returnstring+=" | ";
                    }
                return returnstring;
            }
        });

The buttons appear in the tooltip but not react to the onclick function.

As you're already using jQuery, you might as well use it here as it'll make your life easier! $(document).on('click', '.popover a', function(){} — MackieeE
– MackieeE, Commented Oct 30, 2013 at 18:48
hm, I added it like this $(document).on('click', '.popover a', function(){ alert("asd"); }); and it didnt helped :/ — Julius ShadowAspect Flimmel
– Julius ShadowAspect Flimmel, Commented Oct 31, 2013 at 8:10
Answered & Updated, don't forget to mark if it's correct for you, as you haven't seem to have done that for any other of your questions! — MackieeE
– MackieeE, Commented Oct 31, 2013 at 13:00

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

I've adjusted your original question (Demo Fiddle: http://jsfiddle.net/WfcM9/) to use jQuery to instead create the buttons and event handling.

With jQuery, it'll be adding the buttons to the DOM, giving them an class then outside the popover() function, give it a $(document).on('click', 'classname') for the document to wait for.

With jQuery `.on('click')`

<script>
var files = [ "FileOne", "FiletWO" ],
    options = { 
       trigger: 'click',
       html: 'true',
       title:  "<b>Čas</b>",
       content:  function() {
           var $buttonsContainer = $('<div />');
           for( var i=0; i< files.length; i++ ) {

                  var addLink = $('<a>').addClass('fileclick btn btn-default')
                                        .attr( 'data-id', files[i] )
                                        .html( files[i] );
               
                  $buttonsContainer.append( addLink );                   
               }
               return $buttonsContainer;
           }
       };

    /**
     *  Create the Popover with above Options
    **/
    $('#button_nowtime').popover(options);

    /**
     * Listen for the Class Click on the buttons created.
    **/
    $(document).on('click', '.fileclick', function() {
         alert( $(this).data('id') ); 
         //Alerts FileOne or FileTwo
     });

</script>

Fiddle Demo: http://jsfiddle.net/M2HQD/3/

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 31, 2013 at 9:32

MackieeE

11.9k4 gold badges41 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tmthyjames Over a year ago

doing $(document).on('click', ... did it for me as opposed to $('.parent').on('click'... Thanks! man i love the internets.

Collectives™ on Stack Overflow

bootstrap - button with onclick function inside tooltip

1 Answer 1

With jQuery `.on('click')`

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

With jQuery .on('click')

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related

With jQuery `.on('click')`