Question

我使用MVVM为类似ERP的系统构建单页应用程序

有一个模板A包含JQ操作，如$（＆＃34;＃xxx＆＃34;），一些JQ插件如bootsrap modal和fineuploader也需要属性id来定位其模态和子模板，

<a href="#myModal" role="button" class="inline btn" data-toggle="modal">Select</a><br>
<!-- bootstrap modal use #id to find its modal template -->

现在我想在一页＆＃39; index.html＆＃39;中加载模板A两次（A1，A2），但是我遇到了JQ操作冲突（$（＆＃34;＃xxx＆＃34;）在A1中返回A1和A2中的元素，但我只需要在A1）

中

那么，当我使用Jquery时如何分离A1和A2？

[使用$（＃id.class）for find element outside（index.html）而不是模板里面是个好主意（JQ操作在A中）因为A1，A2模板共享相同的$（＃ id.class）最后返回两个JQ对象。也使用模板工程师导致难以调试此模板，因为它是一个复杂的页面]

Answer 1

单个页面不能有任何两个具有相同ID的元素，例如#xxx。使用class而不是id。

<div class="xxx">A</div>

编辑：
如果您不能简单地将ID更改为类，则可以使用一些js template来生成动态ID或动态数据目标。

http://getbootstrap.com/javascript/#modals-sizes

<!-- dynamic id -->
<a href="#myModal<%= count %>" data-toggle="modal">Select</a>
<div id="myModal<%= count %>" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">...</div>

<!-- dynamic data-target -->
<a data-target"myModal<%= count %>" data-toggle="modal">Select</a>
<div class="modal fade myModal<%= count %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">...</div>

如何避免jQuery操作与单页应用程序中的2+模板冲突

1 个答案: