Как избежать JQuery операции Конфликта с 2+ шаблонов в одностраничном Применении

Question

Я строй одностраничного приложения для ERP-системы, как с MVVM

есть один шаблон А, включают в себя такие операции, как JQ $ ("# ххх "), некоторые JQ pluigns как bootsrap модальных и fineuploader также необходимо отнести идентификатор, чтобы найти его модальный и суб-шаблон,

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

Теперь я хочу, чтобы загрузить шаблон дважды (A1, A2) в одной странице" index.html ', однако я испытываю конфликт операций JQ ($ ("# xxx") в элементах возврата A1 в A1 и A2, но мне нужно только в A1)

Итак, как разделять A1 и A2, когда я использую JQuery ?!

[рекомендуется использовать $ (# id.class) для нахождения внешнего элемента (index.html), а не внутри шаблона (операции JQ находятся в A), поскольку шаблоны A1, A2 используют один и тот же $ (# id. класс) и, наконец, вернуть два объекта JQ. также использование шаблона-инженера приводит к трудностям отладки этого шаблона, потому что это сложная страница]

Answer 1

В одной странице нет двух элементов с одинаковым идентификатором, например #xxx. Используйте класс вместо id.

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

EDIT:
Если вы не можете просто изменить идентификатор класса, вы могли бы использовать некоторые js template для создания динамического идентификатора или динамические данные цели.

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>