jQuery function associated with Bootstrap button is executed only once

Question

I'm following a tutorial using Bootstrap 3. So far so good, except for a non-expected behavior: when I click a button associated with a jQuery function, the alert gets displayed fine. However, once I dismiss it, clicking the button again doesn't do anything, that is, looks like it's a no-op.

For brevity, I'll include the relevant sections. I have the following <div>:

    <div class="row" id="bigCallout">
        <div class="col-12">

            <div class="alert alert-success alert-block fade in" id="successAlert">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <h4>Success!</h4>
                <p>You just made this element display using jQuery.</p>
            </div>

        </div>
    </div> <!-- end bigCallout -->

Below I include my JS file:

<!-- Custom JS -->
<script src="includes/js/script.js"></script>

The JS file mentioned above contains this only function:

$(function() {

   $('#alertMe').click(function(e) {

       e.preventDefault();

       $('#successAlert').slideDown();

   });

});

Why is the function being executed only the first time the button is clicked? Thanks!

No error. Please see Jason's response, which explains why it was behaving the way it was. — titusmagnus
– titusmagnus, Commented Nov 26, 2014 at 4:43

Jason W · Accepted Answer · 2014-11-26 03:46:44Z

1

When you rely on the data-dismiss="alert" which dismisses/closes the alert, the alert is actually removed from the data model. Therefore, when you click to attempt to slideDown the element again, that element no longer exists.

To get the desired behavior to re-use an alert message that has been "dismissed", you'll have to remove your data-dismiss and respond to the click event on the close button to slideUp or hide the element. Then your subsequent slideDown code will find the DOM elements successfully.

[EDIT] Here is a JSFiddle: http://jsfiddle.net/de4qkoe5/

answered Nov 26, 2014 at 3:46

Jason W

13.2k3 gold badges35 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery function associated with Bootstrap button is executed only once

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related