bootstrap没有通过erb与动态呈现的html绑定
bootstrap not binding with dynamically rendered html via erb
我正在使用Bootstrap开发Rails应用程序。在我的一个观点中,我使用了"标签":
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
</div>
如果它是硬编码的HTML,这就可以正常工作。当我在"导航选项卡"项目中动态添加额外的"li"时:
<% if @customer.profiles.present? %>
<% @customer.profiles.each_with_index do |profile,index| %>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile<%=index%>" role="tab"> profile-<%=index%> </a>
</li>
<% end %>
<% end %>
和"选项卡内容"中的"div",两者都具有唯一编号:
<% if @customer.profiles.present? %>
<% @customer.profiles.each do |profile,index| %>
<div class="tab-pane" id="profile<%=index%>" role="tabpanel">
<%= render :partial => 'profiles/homes_pane' , :locals => { :profile => profile} %>
</div>
<% end %>
<% end %>
添加到"href"answers"id"中后,选项卡不再工作。
因此,Bootstrap似乎没有将javascript绑定到动态生成的HTML元素。
我是做错了什么,还是需要一个变通办法。欢迎提出任何建议。
致以最良好的问候,Martijn
Bootstrap不知道动态生成之间的区别,因为它是客户端进程。
选项卡内容片段中似乎缺少一个each_with_index。
如果您使用元素检查器,我想您会看到第二部分的索引显示不正确。
相关文章:
- 如何在tinymce编辑器中将点击事件绑定到html标签
- bootstrap没有通过erb与动态呈现的html绑定
- 挖空 HTML 绑定和字符串格式的 HTML 长度
- 挖空 JS html 绑定返回奇怪的代码而不是 html 字符串
- Knockout.js - “html”绑定中的“值”绑定
- KNOCKOUTJS HTML 绑定不起作用
- 如何从Knockout html绑定中删除换行符
- AngularJS使ng将html绑定到动态构建的对象名称
- AngularJS html绑定和Chome应用程序CSP
- angularjs中的单向HTML绑定
- Knockout.js动态HTML绑定返回[object object]
- 内部有另一个绑定的敲除html绑定
- 如何用空容器knockoutjs在html绑定中显示可观察对象
- 显示ko.可观察对象的HTML绑定
- 是否有可能强制knockout解析通过html绑定添加的新绑定?
- 将绑定应用到HTML绑定中生成的绑定中
- 监视html绑定内容的更改
- 执行& lt; script>在AngularJS中通过ng-bind-html绑定的标签
- Knockout JS如何绑定可观察的对象html绑定
- 在执行ng-repeat和执行在HTML中没有反映的操作时,将作用域从HTML绑定到指令