Question

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.');
});

Answer 1

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!