jquery load is not a function inside click event [closed]

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.

This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.

Closed 6 years ago.

Improve this question

I am a starter on jquery. and I encountered this problem today. really hope someone can help.

$('#lecture').on('click', function() {
    $("#screen").load("lecture_page.html");
});

error : course_page.js:7 Uncaught TypeError: $(...).load is not a function

however,

$("#screen").load("lecture_page.html");

this line works by itself.

I already spent couple hours on this by searching through stackoverflow. I tried couple approaches such as: checked my version is not "slim", tried .on("load") instead of .load()...

forgot to mention:

$('#lecture').on('click', function() {
    $("#screen").html("lecture_page.html");
});

if I use the .html() method instead of .load(), it will function correctly and display the text "lecture_page.html" at the correct position.

solved. The reason ends up to be the global sidebar that I am using do have a slim version included in it. Thank you guys for the fast responses. This is my first question on stackoverflow. The experience was very good!

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  //alert('course page js connected');
$(function() {
    $("#sidebar").load("sidebar.html");
});

$('#lecture').on('click', function() {
    $("#screen").load("lecture_page.html");
});
//error : course_page.js:7 Uncaught TypeError: $(...).load is not a function

//$("#screen").load("lecture_page.html"); //this line works fine, however the above "load" cannot be recognized


//-------------------------------------------------------------------
//below is everything I have tried 

    // $("#lecture").click(function(e){
    //     //e.preventDefault();
    //     console.log("clicked");
    //     $("#screen").load("lecture_page.html");
    // });

//$("#screen").load("lecture_page.html");

// $(document).on('click','#lecture',function(e){
//     //e.preventDefault();
//     console.log("clicked");
//     $("#screen").load("lecture_page.html");
// });
</script>

you tried wrap your code into $(document),ready(function() { }); ? — daremachine
– daremachine, Commented Dec 3, 2018 at 3:05
According to your comments, the exact same line of code, just outside of the event handler, works - it may not work within the event handler context. — Jack Bashford
– Jack Bashford, Commented Dec 3, 2018 at 3:05
@daremachine yes, they are in different html <div>, is this what causing problem? — Ding33
– Ding33, Commented Dec 3, 2018 at 4:48

Ding33 · Accepted Answer · 2018-12-03 05:35:02Z

0

I ended up solving my own problem. thanks for the fast responses and help, everyone.

The reason ends up to be the global "sidebar.html" that I am using does have a jquery slim version included in it. After deleting it, everything worked.

answered Dec 3, 2018 at 5:35

Ding33

193 bronze badges

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

1 Comment

Miguel Ortiz Over a year ago

Ty, same issue, the jQuery slim version blocked me from using .load and was driving me nuts, I found it in a link.

Collectives™ on Stack Overflow

jquery load is not a function inside click event [closed]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related