Question

我正在使用按钮启动引导模式，然后通过jQuery更改按钮类和文本。我想在更改按钮类后启动另一个引导模式。

这是我的代码

$('.btn myBtn1').click(function () {
   var id = $(this).closest('tr').data('id');
$('#myModal1').data('id', id).modal('show');
 $('. btn').addClass(' myBtn2');
$('. btn').removeClass(' myBtn1');

});
//second modal code
$('.btn myBtn2').click(function () {
  var id = $(this).closest('tr').data('id');
$('#myModal2').data('id', id).modal('show');
 $('. btn').addClass(' myBtn1');
$('. btn'). removeClass(' myBtn2');

});

我的问题是它推出了相同的模式。模态1并且永远不会加载模态2。我该怎么做才能解决这个问题？感谢你的时间。

Answer 1

您已动态更改按钮类，因此未附加客户端事件。在这种情况下，您使用父级而非子级附加了click事件。更多信息In jQuery, how to attach events to dynamic html elements?

使用此：

$('body').on('click', '.btn myBtn2', function () {

Answer 2

更改以下代码行：

//second modal code
$('.btn myBtn2').click(function () {

到

//second modal code
$(document).on('click', '.btn myBtn2', function(){

原因：当您动态更改选择器时，必须使事件侦听器也能够处理它。 $('selector').click();仅适用于静态选择器。

从Ajax更改按钮加载bootstrap模式

2 个答案: