CODEWITHSUNDEEP
javascriptjquery
Buttle Butkus
Buttle Butkus

Reputation: 9486

jQuery .change() not triggering on select - example from api.jquery.com

I copied this example from api.jquery.com

$('.target').change(function() {
  alert('Handler for .change() called.');
});

I also tried:

$('#target').change(function() {
  alert('Handler for .change() called.');
});

I copied it into my .js file, which is included in my html. I have another jQuery function in there (beginning $(window).load(function () { ..."

The other function is working. But the above simple function is not.

The form looks like this:

<form>
    <select id="target" class="target">
        <option name="pp" value="6">6</option>
        <option name="pp" value="12">12</option>
    </select>
 </form>

I want to just use id, but I added class just for testing. But neither works.

Why doesn't this simple function work? Do I need to do anything else to connect the change event to the function? I am new to jQuery, but I know that in javascript I would have to have the onchange event of the form call the function in order for something to happen.

EDIT: Ok, here is EVERYTHING in my included .js file. As you can see, just one other function. Is it interfering? Also, I have only 1 form on the page, which you see above. I am going to have it change the number of results shown per page (6 or 12).

$(window).load(function() {
    $("img.gall_img").each(function() { // iterate through all img of class gall_img
        var imgWidth = $(this).width(); // "$(this)" to access jQuery width() func
        var divWidth = $(this).closest('div').width();
        //alert(imgWidth + " and " + divWidth); // for debugging
        if(imgWidth > divWidth) {
            var position = Math.round(-1 * ((imgWidth/2) - (divWidth/2))); // 
            position = position + "px"; // make position format "123px".
                $(this).css("left", position); // "$(this)" to access jQuery css() func
            }
    });
});


$("#target").change(function() {
  alert('Handler for .change() called.');
});

Upvotes: 0

Views: 1870

Answers (4)

techfoobar
techfoobar

Reputation: 66693

Try placing your .change(..) inside a .ready(..) function like this:

$(document).ready(function () {
  $('#target').change(function() {
    alert('Handler for .change() called.');
  });
});

Upvotes: 1

themerlinproject
themerlinproject

Reputation: 3582

Put the code inside the $(window).load function, like so:

$(window).load(function () {

//whatever code is already here

$('.target').change(function() {
  alert('Handler for .change() called.');
});

}); //end of $(window).load function

$(window).load(function () tells the browser to only run that code after the entire page is loaded INCLUDING images. Traditionally with jQuery you will see the $(document).ready(function() {... which tells the browser to not process that code until after the page is loaded (not including images)

IF you don't need to wait for the images to load to run your jQuery then you could replace $(window).load(function () { with $(document).ready(function () {

Cheers!

Upvotes: 2

Alexander Yezutov
Alexander Yezutov

Reputation: 3214

Are you sure, it doesn't work? Here is a working link to jsfiddle: http://jsfiddle.net/ayezutov/7pEP4/

UPDATE:

Both versions work: http://jsfiddle.net/ayezutov/7pEP4/1/

Upvotes: 0

Stijn_d
Stijn_d

Reputation: 1088

I've tried this code in jsFiddle => http://jsfiddle.net/GjScg/

And this code should work, is there any other javascript that is bounded on the Change event? Perhaps there's some other code around, that causes errors?

Upvotes: 0

Related Questions