javascript - Bootstrap 3 Modal Event (Hidden.Bs.Modal) Keeps Repeating - Stack Overflow

admin管理员组

文章数量:1404927

I have 6 images that load in different 6 different modal windows and they each have a next button and also a close button in them. The next button works with the following jquery code:

    $('#nextModal12').click(function() {
        $('#featuresModal1').modal('hide');
        $('#featuresModal1').on('hidden.bs.modal', function () {
            $('#featuresModal2').modal('show');
            document.getElementById('#featuresModal1').style.display="none";
        });
    });

    $('#nextModal23').click(function() {
        $('#featuresModal2').modal('hide');     
        $('#featuresModal2').on('hidden.bs.modal', function () {
            $('#featuresModal3').modal('show');
            document.getElementById('#featuresModal2').style.display="none";                            
        });
    });     

However, the problem is: Even when I close/hide the first modal ('#nextModal12') by clicking the CLOSE button instead of the next, the second modal appears.

I believe this is because the hidden.bs.modal function is picked up and called again even when I'm not clicking the next button. How do I prevent the script from picking up the hidden.bs.modal function indiscriminately?

I have 6 images that load in different 6 different modal windows and they each have a next button and also a close button in them. The next button works with the following jquery code:

    $('#nextModal12').click(function() {
        $('#featuresModal1').modal('hide');
        $('#featuresModal1').on('hidden.bs.modal', function () {
            $('#featuresModal2').modal('show');
            document.getElementById('#featuresModal1').style.display="none";
        });
    });

    $('#nextModal23').click(function() {
        $('#featuresModal2').modal('hide');     
        $('#featuresModal2').on('hidden.bs.modal', function () {
            $('#featuresModal3').modal('show');
            document.getElementById('#featuresModal2').style.display="none";                            
        });
    });     

However, the problem is: Even when I close/hide the first modal ('#nextModal12') by clicking the CLOSE button instead of the next, the second modal appears.

I believe this is because the hidden.bs.modal function is picked up and called again even when I'm not clicking the next button. How do I prevent the script from picking up the hidden.bs.modal function indiscriminately?

• javascript
• jquery
• twitter-bootstrap
• bootstrap-modal

Share Improve this question Follow asked Jan 6, 2015 at 5:49 clodalclodal 1,8352323 silver badges3636 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Try use .one function instead of .on. When you use .on() your callback would be repeating again and again, beacuse you bind it again for each click;

$('#nextModal12').click(function() {
    $('#featuresModal1').modal('hide');
    $('#featuresModal1').one('hidden.bs.modal', function () {
        $('#featuresModal2').modal('show');
    });
});

$('#nextModal23').click(function() {
    $('#featuresModal2').modal('hide');     
    $('#featuresModal2').one('hidden.bs.modal', function () {
        $('#featuresModal3').modal('show');                          
    });
});

Don't bind hidden.bs.modal again and again on modal click, just bind it once like,

$('#nextModal12').click(function() {
    $('#featuresModal1').modal('hide');
});
 $('#featuresModal1').on('hidden.bs.modal', function () {
    $('#featuresModal2').modal('show');
    $(this).hide();// you can use hide function
});

$('#nextModal23').click(function() {
    $('#featuresModal2').modal('hide');     
});   
$('#featuresModal2').on('hidden.bs.modal', function () {
    $('#featuresModal3').modal('show');
    $(this).hide(); 
});

Alternatively, you can try

$('#nextModal12').click(function() {
    $('#featuresModal1').modal('hide'); // hide first
    $('#featuresModal2').modal('show'); // show second
});

$('#nextModal23').click(function() {
    $('#featuresModal2').modal('hide');
    $('#featuresModal3').modal('show');
});

本文标签： javascriptBootstrap 3 Modal Event (HiddenBsModal) Keeps RepeatingStack Overflow