JavaScript - function is not defined

Question

I've been stuck with this for hours now. I think it's time for some new eyes on the code. I'm pretty new to JavaScript so I could have certainly overlooked some detail. I should note that other functions are working properly.

I'm creating rows in a table dynamically and a few of the cells contain SELECT elements. Here is the script (just the portions where I am having trouble):

case 2:
    newcell.innerHTML = "<select id='size" + pid + "' class='ad_size' \
                             onChange='updateSubtotal()'> \
                             <option value='0'>Full</option> \
                             <option value='1'>Half</option> \
                             <option value='2'>Quarter</option> \
                             <option value='3'>Eighth</option> \
                             <option value='4'>Directory</option> \
                         </select>";
    break;

and the basic function where I am just trying to log whether or not it is being called properly:

function updateSubtotal() {
    console.log("size changed");
    return true;
}

It is probably helpful to add that I originally tried doing this with jQuery .change and it was also not working:

$(".ad_size").change(function(){
    console.log("size changed");
});

Any dumb error you can see?

change console.log to alert and see what happens - I dumped your code into a fresh page and it's happy with an alert — web_bod
– web_bod, Commented May 17, 2012 at 22:58

LocalPCGuy · Accepted Answer · 2012-05-18 05:46:13Z

3

Since you are adding the element dynamically try using delegate to attach event handler.

$('tableSelector').delegate('.ad_size', 'change', function(){
    console.log("size changed");
});

Or use on if you are using jQuery 1.7+

$('tableSelector').on('change', '.ad_size', function(){
    console.log("size changed");
});

edited May 18, 2012 at 5:46

LocalPCGuy

6,1352 gold badges36 silver badges28 bronze badges

answered May 17, 2012 at 22:51

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

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

1 Comment

LocalPCGuy Over a year ago

.delegate (1.4+) or .on(1.7+) would be the appropriate way to do this with current versions of jQuery.

mgraph · Accepted Answer · 2012-05-17 22:59:31Z

0

try:

 $(document).ready(function(){
       $(".ad_size").live('change',function(){
           console.log("size changed");
       });
    });

edited May 17, 2012 at 22:59

answered May 17, 2012 at 22:50

mgraph

15.3k4 gold badges43 silver badges76 bronze badges

3 Comments

SLaks Over a year ago

.on wouldn't make any difference like that.

Kevin_TA Over a year ago

wow thank you. .on did not work, but .live worked like a charm.

LocalPCGuy Over a year ago

.live should not be used with jQuery 1.7+. You should be using .on() with the example shown in the answer by @ShankarSangoli. Not that you should attach this to document, but you can achieve the exact same effect as .live by doing $(document).on("change", ".ad_size", function() { ... });

Collectives™ on Stack Overflow

JavaScript - function is not defined

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related