'A classical jQuery error - Uncaught TypeError: undefined is not a function

I have some JS functions in my page, and I got this error. I removed everything but the incriminated lines and I still get this error.

I searched this forum and the web, so I tried to add : semicolons, (jQuery), add the $ to the function arguments... I still get the same error.

I use jQuery 1.11.2, declared in my header.

Here is the whole code for those who asked :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>  
<script type= "text/javascript" src= "jquery-1.11.2.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
    
<h2>Exporter les données d'une base<BR><BR></h2>
<HR></HR>
<form method="post" action="execute_function.php" enctype="multipart/form-data">
<?php
include 'functions.php';
propose_choix_BDD();
?>
<BR>
<div class="camp">
</div>
<div class="fichier">
</div>
<BR><BR><BR>

<div class="button">
<?php
submit_button("Export_KML");
submit_button("Export_csv");
?>  
</div>
<input type= "hidden" name="export_campagne" value="true" />
</form>


    <script type="text/javascript">
    console.log("I start");
    $(function(){
        $('.camp').on('change',"#id_camp_ch",function()  { //error here
            alert ("I change !");
            }); 
    console.log("I stop");
    }); 

    </script>
</body>
<?php
retour_index();
?>

propose_choix_BDD() echoes a dropdown with DB inside, div class="camp" contains some tables echoed when a jQuery change is detected in the DB menu (script removed for clarity reasons). So .camp is dynamically filled. Once it is, I'd like my JS to detect a change made by the user in the dropdown menu. #id_camp_ch is the name of the id of the <select> that wraps this menu.

I agree that as I have cut a part of my code, .camp will remain empty. In other words, #id_campagne_choix will never exist. But it won't exist in the beginning too even if I use my full script. So I shouldn't get such an error ...

I also tried to put all my script at the bottom of the document.

If I remove the lines $( ".camp" )...}) the alert does display.

If you have any idea for this it'll be awesome :)

Solution 1:^[1]

Their is a error, Please try the following code...

onload = function() {

            $( ".camp" ).on("change","#id_camp_ch",function()  {
                alert ("change !");
                });             
        };

But rather you should use

$(document).ready(function(){
$( ".camp" ).on("change","#id_camp_ch",function()  {
                    alert ("change !");
                    }); 
});

The onchange will fire when DOM is ready.

Solution 2:^[2]

I finally downloaded once again jQuery v2.1.1. and it worked ! Thanks for your help

Solution 3:^[3]

I didn't understand the purpose of changing a div, because divs don't have the change listener.

You could use one of this examples to help:

<form method="post" action="execute_function.php" enctype="multipart/form-data">
<BR>
change me!
<input type="text" class="camp"><br>
or me
<input type="text" id="id_camp_ch"><br>
dont change me! i won't make anything!
<input type="text" id="id_camp_ch" class="camp">
</id>
<div class="fichier">
And never change ME!!!!!
<select id="test">
<option></option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</div>
<BR><BR><BR>

<div class="button">
</div>
<input type= "hidden" name="export_campagne" value="true" />
</form>

<script type="text/javascript">

$('#id_camp_ch.camp').change(function()  {
alert ("I said to u dont change me!!!"); //or do what u need
});
</script>

I think also that the div tag don't have the change listener, that's why it's throwing the error.

If the id_camp_ch is a children of the div with style camp, or something else then you should use .camp>#id_camp_ch instead of .camp#id_camp_ch.

I think you can solve it by using the right selectors instead of using the .on() function.

Solution 4:^[4]

Include jquery before using it.

Enjoy :)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	void
Solution 2	Fafanellu
Solution 3	Brian Tompsett - æ±¤èŽ±æ©
Solution 4

'A classical jQuery error - Uncaught TypeError: undefined is not a function

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]