javascript - bootstrap - 工具提示内带有 onclick 功能的按钮

Question

如标题所述。我试图创建一个工具提示，里面会有一些按钮。问题在于 onclick 功能，它在某种程度上不起作用。这是我拥有的实际代码。

$('#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;
            }
        });

按钮出现在工具提示中，但对 onclick 功能没有反应。

Answer 1

我已经调整了您的原始问题（Demo Fiddle：http: //jsfiddle.net/WfcM9/）以使用 jQuery 来创建按钮和事件处理。

使用 jQuery，它会将按钮添加到 DOM，给它们一个类，然后在popover()函数之外，给它一个$(document).on('click', 'classname')让文档等待的类。

使用 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>

小提琴演示：http: //jsfiddle.net/M2HQD/3/