Question

我试图在某个事件发生后将此示例https://gist.github.com/mnewt/4228037注入我的DOM。它适用于我坚持使用“常规”HTML，但如果我尝试做这样的事情就行不通：

var content = document.getElementById('popup-content');

var information= '<div class="container">'+
'<div id="content">'+
    '<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">'+
        '<li class="active"><a href="#red" data-toggle="tab">Red</a></li>'+
        '<li><a href="#orange" data-toggle="tab">Orange</a></li>'+
        '<li><a href="#yellow" data-toggle="tab">Yellow</a></li>'+
        '<li><a href="#green" data-toggle="tab">Green</a></li>'+
        '<li><a href="#blue" data-toggle="tab">Blue</a></li>'+
    '</ul>'+
    '<div id="my-tab-content" class="tab-content">'+
        '<div class="tab-pane active" id="red">'+
            '<h1>Red</h1>'+
            '<p>red red red red red red</p>'+
        '</div>'+
        '<div class="tab-pane" id="orange">'+
            '<h1>Orange</h1>'+
            '<p>orange orange orange orange orange</p>'+
        '</div>'+
        '<div class="tab-pane" id="yellow">'+
            '<h1>Yellow</h1>'+
            '<p>yellow yellow yellow yellow yellow</p>'+
        '</div>'+
        '<div class="tab-pane" id="green">'+
            '<h1>Green</h1>'+
            '<p>green green green green green</p>'+
        '</div>'+
        '<div class="tab-pane" id="blue">'+
            '<h1>Blue</h1>'+
            '<p>blue blue blue blue blue</p>'+
        '</div>'+
    '</div>'+
'</div>';
content.innerHTML= information;

注意：在不久的将来，ID仅用于某些样式目的。

此外，URL从www.abc.com更改为www.abc.com/#orange。

Answer 1

如果您在呈现DOM之后添加HTML，则页面不知道那些新元素存在。您需要将事件重新绑定到其ID，或者首先通过ID，类等将它们绑定在一起。

$('body').on('click', '#red', function(){
    doSomething();  
});

如何在javascript中注入bootstrap的选项卡

1 个答案: