Question

我有一个模态（我使用twitter bootstrap 2.3.2 ，我需要使用它，请不要说使用bootstrap3），我想根据点击显示不同的内容按钮。换句话说，有多个按钮被动态添加到dom中，并且基于单击的按钮，我需要显示不同的内容。目前，无论我在哪里推送，它始终显示首次点击按钮的内容。这是我的代码：

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button>
        <h3 id="myModalLabel">Query Name</h3>
    </div>
    <div class="modal-body">

       <div id="graph" style="position:relative;overflow:hidden;cursor:default;" class="{{getViewType}}">
           <center id="splash" style="padding-top:230px;">
               <img src="../images/loading.gif">
           </center>
       </div>

    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
</div>

这是我的经纪人：

$(document).on('hidden','#myModal',function(){
    console.log('it comes here');  // this is printed every time I close modal
     $(this).removeData('modal');
});

Answer 1

也许检查动态添加按钮的ID是否唯一。此外，任何将在点击时运行的功能代码也会动态添加，否则它将无法运行。查看按钮的代码肯定会有所帮助。

Answer 2

<强> DEMO

好的..我更喜欢.shown此事件的modal事件和全局变量来存储点击button的数据，如下所示

var dataToShow=""; //global variable

//A button click event to store data
$('button').on('click',function(){
    dataToShow=$(this).text();//For DEMO purpose am storing text of button clicked in dataToShow
});


$(document).on('shown','#myModal',function(){
    //Will be triggered when modal is opened
    alert(dataToShow);//Just for verification
    $('.modal-body .datadisplay').html(dataToShow); 
    //assign the value in a separate div inside modal-body so that you will not replace anything else each time
});

现在，由于button是动态创建的，我建议您使用event delegation将event附加到button

$(document).on('click','.yourbuttonClass',function(){
     dataToShow=$(this).text();
});

现在，如果你想要，你可以使用

$(document).on('hidden',"#myModal",function(){
    //clear the contents inside an element added i.e. .datadisplay inside modal-body
    $('.modal-body .datadisplay').empty();   
})

如何在每个开口处更改模态的内容

2 个答案: