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

时间:2013-10-30 18:38:22

标签: javascript jquery html twitter-bootstrap

如标题所述。我试图创建一个工具提示,里面会有一些按钮。问题在于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功能做出反应。

1 个答案:

答案 0 :(得分: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/