在错误的引导对象上处理 Javascript 事件

Question

我目前正在使用模板来创建包含引导模式的 html。我想访问每个模态的 show.bs.modal 事件。每个模板的 div 由带有名称的 ConEd id 给出，其中包含一些代码，包括对模态的引用：

    <div id='ConEd<%=name%>'>
    ...
    <div class="modal fade" id="ConceptText" role="dialog" aria-labelledby="ConceptLabel">
    ...       
    <h4 class="modal-title" id="ConceptLabel"></h4>

在页面的 javascript 中，我为两个已按名称成功创建的 ConEd 对象编写了以下行。

    var tab1 = $('#ConEd'+'input1'+' .active'); 
    var tabmodal1 = tab.find('.modal[id=ConceptText]');
    tabmodal1.on('show.bs.modal', function (event) {
        var modal = $(this);
        modal.find('.modal-title').text('input1 title');    
    });


    var tab2 = $('#ConEd'+'input2'+' .active'); 
    var tabmodal2 = tab.find('.modal[id=ConceptText]');
    tabmodal2.on('show.bs.modal', function (event) {
        var modal = $(this);
        modal.find('.modal-title').text('input2 title');    
    });

在调试每个 tabmodal 变量时都有正确的选择器 - 归因于正确的 ConEd 对象。

不幸的是，每当显示模态并触发 show.bs.modal 事件时，只会触发第一个事件（标题设置为“input1 title”），因此两个模态都有标题文本“input1 title”。

我无法弄清楚我做错了什么，甚至将第一个归因于两个模态对象。如果有任何指点，我将不胜感激。

Answer 1

不确定我是否正确阅读 - 但您帖子的顶部似乎表明模态是从模板创建的 - 但如果顶部是该模板的一部分 - id 是静态的，因此将是给每个模态。

 <div class="modal fade" id="ConceptText" role="dialog" aria-labelledby="ConceptLabel">

这意味着此模板创建的每个模态都将具有“conceptText”的 id，因此任何后续操作都将仅适用于第一个。因此，您可能必须找到一种方法来动态更改模板中每个模态的 id。

 <div class="modal fade" id="<%=id%>" role="dialog" aria-labelledby="ConceptLabel">