jQuery functions not working when called on event

Question

I have a page using jQuery and Bootstrap. Everything works fine, but for some reason, when I call a function on an event the console says $(...).function is not a function. For example, if I have this:

<script>
    $("#myModal").modal('show');
</script>

It works fine, and the modal shows as soon as you load the page. However, if I try to call it like this:

<script>
    $("#myTrigger").click(function(e){
        e.preventDefault();
        $("#myModal").modal('show');
    });
</script>

It doesn't work and the console gives this error:

$(...).modal is not a function

Any ideas?

EDIT:

<script>
    $(document).ready(function(){
        $("#myModal").modal('show');
    });
</script>

works fine, but again,

<script>
    $(document).ready(function(){
        $("#myTrigger").click(function(e){
            e.preventDefault();
            alert("test); // Does alert
            $("#myModal").modal('show'); // Doesn't work
        });
    });
</script>

...doesn't. Since the alert worked, it's safe to say that the trigger does exist and the click event is being called properly. I'm using a couple other frameworks, a WYSIWYG editor and uploadify. Could this be a conflict error? I didn't think so at first since both cases are being tried right after each other, so if there was a conflict it wouldn't work on either, right?

UPDATE:

Looks like it was a pretty darn weird conflict issue. I tried the following:

var bootstrapModal = $.fn.modal.noConflict();
$.fn.bModal = bootstrapModal; // established outside the click event

$("#myTrigger").click(function(e){
    e.preventDefault();
    $("#myModal").bModal('show'); // doesn't work
});

And I still got the same issue. However, establishing $.fn.bModal inside the click event, as so:

var bootstrapModal = $.fn.modal.noConflict();

$("#myTrigger").click(function(e){
    e.preventDefault();
    $.fn.bModal = bootstrapModal; // established inside the click event
    $("#myModal").bModal('show'); // works fine
});

Worked. Still can't wrap my head around why this happened and why it worked on $(document).ready() but not on $('#trigger').click(), maybe the specific way Chrome deals with conflicts was also part of it. Anyway, this will do. Thanks to everyone who helped.

That's odd. If the first code sample works, there's no reason that the second wouldn't either. Could you show a working example of the problem in a snippet or fiddle? Also, I assume you're executing these scripts just before the `
` to ensure the DOM has been loaded, is that correct? — Rory McCrossan, Jan 04 '17 at 16:09
Take a look at this [page](http://stackoverflow.com/questions/33045469/function-is-not-a-function-jquery) This is most often caused because $ is being use by some other script (i.e Bootstrap). — Loaf, Jan 04 '17 at 16:13
http://v4-alpha.getbootstrap.com/components/modal/#events as i can see, no need for click at all... — sinisake, Jan 04 '17 at 16:15
Please show us the problem in a working fiddle or on a webpage. It's impossible to tell without being able to look at it (and see a lot more code). — Seb, Jan 04 '17 at 16:19
@sinisake there is if the OP wants the modal to appear when an element is clicked instead of on load — Rory McCrossan, Jan 04 '17 at 16:20
@RoryMcCrossan, yes, and it can be done via data attributes on buttons... no need for writing jQuery code, especially because it doesn't work, in this case...it seems — sinisake, Jan 04 '17 at 16:21
@sinisake ah yeah - good point. Although it's still very odd that this doesn't work for the OP. There's no reason for it not to without another error intefering with the code. — Rory McCrossan, Jan 04 '17 at 16:24
@OP thanks for the update. Have you checked the console for errors in other parts of your code at all? — Rory McCrossan, Jan 04 '17 at 16:29

score 1 · Answer 1 · answered Jan 04 '17 at 16:14

1

Did you try wrapping the code in an

$(document).ready(function(){
// your code
});

answered Jan 04 '17 at 16:14

Tim Huijgen

11
2

If this was the issue the first code sample wouldn't have worked either. – Rory McCrossan Jan 04 '17 at 16:19
Doesn't that depend on where he loads jQuery and Bootstrap compared to where he runs this code? – Tim Huijgen Jan 04 '17 at 16:28
Yes it does, but if the first sample works then the setup must be correct – Rory McCrossan Jan 04 '17 at 16:29

binpy · Answer 2 · 2017-01-04T16:36:32.567

I already tried your snippet code, and then i found the same problem $(...).modal is not a function.. so why?

one reason of it because the jquery isn't placed before source of bootstrap.

This is wrong:

<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/jquery.min.js"></script>

This is correct:

<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>

See this demo: https://jsfiddle.net/agaust/fmyoc5zx/

But, if talking about the third party plugin, maybe can handle with jQuery.noConflict

score 0 · Answer 3 · edited May 23 '17 at 12:24

0

I think that the problem is that the function is called when you enter to the page but the document it's not loaded yet. So try this:

$(document).ready(function(){                          
$("#myTrigger").click(function(e){
  e.preventDefault();
  $("#myModal").modal('show');
});
}

Another way to do it is to set onClick="functionname()" in your HTML tag with ID myTrigger. And then declare the function like:

function functionname()
{
 //Code
}

And you don't need $(document).ready();

You can see in this link the same problem: jquery - is not a function error

edited May 23 '17 at 12:24

Community

1
1

answered Jan 04 '17 at 16:15

Roger RV

132
3
15

If this was the issue the first code sample wouldn't have worked either. – Rory McCrossan Jan 04 '17 at 16:19
@RoryMcCrossan But it's different because you are working with functions – Roger RV Jan 04 '17 at 16:26
If you're referring to the edit using `onclick` that's a possibility, but it's a step backwards in code standards. The method the OP is using is the best and should be working given the sample they've shown. There must be another underlying issue here. – Rory McCrossan Jan 04 '17 at 16:28
@RoryMcCrossan No, I'm refering to the first example – Roger RV Jan 04 '17 at 16:30
Ok, but as I stated before, if the problem was that the DOM wasn't ready then the first example the OP shows wouldn't work either. – Rory McCrossan Jan 04 '17 at 16:31

score 0 · Answer 4 · answered Jan 04 '17 at 16:25

0

Its really odd... Try it w/o preventDefault() fn. Like this:

<script>
    $("#myTrigger").click(function(){
        $("#myModal").modal('show');
        return false;
    });
</script>

answered Jan 04 '17 at 16:25

Changed the trigger to a – Emilio Venegas Jan 04 '17 at 16:43

score 0 · Answer 5 · answered Jan 04 '17 at 16:33

I think there is a script which override your $ function with plain jquery. I had a similiar issue and the problem was a third party plugin with an included jquery library. Each custom jquery code works fine, but plugin calls leads to a javascript error. Have a look at your third party stuff and the order of your script tags.

score 0 · Answer 6 · answered Jan 04 '17 at 16:55

0

you have an error (missing quotation ) in you alert code which is preventing the Modal show try this:

<script>
    $(document).ready(function(){
        $("#myTrigger").click(function(e){
            e.preventDefault();
            alert("test"); // Does alert
            $("#myModal").modal('show'); // should work
        });
    });
</script>

answered Jan 04 '17 at 16:55

DaniDev

2,471
2
22
29

That was typo when writing it here. Turn out it was a weird conflict issue. – Emilio Venegas Jan 04 '17 at 17:19

score 0 · Accepted Answer · 2017-01-04T17:14:43.870

Tested this copy/paste demo from getbootstrap.com. Everything works. You must have problem with conflict. IMO jquery or bootstrap script is colliding with other scripts.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <a href="#" class="btn btn-primary btn-lg" id="myTrigger">
      Launch demo modal
    </a>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#myTrigger").click(function(e){
                e.preventDefault();
                $("#myModal").modal('show'); // Does WORK
            });
        });
    </script>
  </body>
</html>

Yes, conflict issue indeed. – Emilio Venegas Jan 04 '17 at 17:19 — Emilio Venegas, Jan 04 '17 at 17:19

jQuery functions not working when called on event

7 Answers7