引导 - 工具提示中带有 OnClick 功能的按钮

bootstrap - button with onclick function inside tooltip

本文关键字：OnClick 功能 按钮 工具提示 引导      更新时间：2023-09-26

如标题中所述。我试图创建一个工具提示，里面会有一些按钮。问题出在点击功能上，它不知何故不起作用。这是我拥有的实际代码。

$('#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 函数做出反应。

我已经调整了您的原始问题（演示小提琴：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/

相关文章：