jquery not executed with twitter bootstrap

Question

I am just starting to use Twitter Bootstrap which works pretty fine.

However I am trying to add some custom jquery code.

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.2.js'></script>
<script type='text/javascript' src="dist/js/bootstrap.min.js"/>
<script type='text/javascript'>
    $(document).ready(function(){
        $( "#link" ).click(function() {
            alert( "Handler for .click() called." );                
        });
    });
</script>

Somehow the JS alert does not get fired.

Any idea what's wrong here?

The related #link tag looks as follows:

<p><a id="link" class="btn btn-default" href="#" role="button">View details</a></p>

If you're adding `#link` to the page after the document has loaded, consider using delegation: `$(document).on('click', '#link', function () { });`... — Andy, Dec 19 '13 at 14:26

score 3 · Answer 1 · edited May 23 '17 at 12:03

3

You can't self-close <script> tags like this:

<script type='text/javascript' src="dist/js/bootstrap.min.js"/>

Change it to:

<script type='text/javascript' src="dist/js/bootstrap.min.js"></script>

Then make sure you don't have two elements with the same link ID, that <a id="link"> exists on page load, and perhaps include an alert outside the event handler to make sure that block of code is running at all.

edited May 23 '17 at 12:03

Community

1
1

answered Dec 19 '13 at 14:26

Blazemonger

90,923
26
142
180

1

@Ravimallya sorry but where? I cannot see it – A. Wolff Dec 19 '13 at 14:27

jquery not executed with twitter bootstrap

1 Answers1