Question

我目前正在使用模板创建html，其中包含来自bootstrap的模式。我想访问每个模态的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">

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

1 个答案: