javascript - jQuery error "cannot read property 'call' of undefined" - Stack Overflow

admin管理员组

文章数量:1418657

I'm a Java programmer trying to write a little javaScript. Bear with me.

I would like a function that updates a total when a digit is entered in any one of the input fields in a table. I have the following line in $(document).ready(function() { ... }

$("#lineCountTable").find('input').each().bind('keyup', function() { 
    updateTotal(this); 
});

In Chrome's debug screen, I get:

Uncaught TypeError: cannot read property 'call' of undefined". The line number pointed to is jQuery-1.8.2.js:611.

I figure I have a syntax error in defining the function to be called. The updateTotal(inputVar) function is duly defined later in the JS file; in case someone's interested, it is:

function updateTotal(inputVar) {
    var row = inputVar.closest('tr');
    var lineCharge = row.find("dlsRowCharge").html().trim();
    var total = 0.0
    var lineCount = inputVar.val();
    if (isNumeric(lineCount)) {
        total = math.abs(lineCount * lineCharge).toFixed(2);
        row.children(".dlsRowTotal").html("$ " + total);
    }
}

I know these functions are usually put inline; I would rather define them separately and call them, unless that's impossible.

I'm a Java programmer trying to write a little javaScript. Bear with me.

I would like a function that updates a total when a digit is entered in any one of the input fields in a table. I have the following line in $(document).ready(function() { ... }

$("#lineCountTable").find('input').each().bind('keyup', function() { 
    updateTotal(this); 
});

In Chrome's debug screen, I get:

Uncaught TypeError: cannot read property 'call' of undefined". The line number pointed to is jQuery-1.8.2.js:611.

I figure I have a syntax error in defining the function to be called. The updateTotal(inputVar) function is duly defined later in the JS file; in case someone's interested, it is:

function updateTotal(inputVar) {
    var row = inputVar.closest('tr');
    var lineCharge = row.find("dlsRowCharge").html().trim();
    var total = 0.0
    var lineCount = inputVar.val();
    if (isNumeric(lineCount)) {
        total = math.abs(lineCount * lineCharge).toFixed(2);
        row.children(".dlsRowTotal").html("$ " + total);
    }
}

I know these functions are usually put inline; I would rather define them separately and call them, unless that's impossible.

• javascript
• jquery

Share Improve this question Follow edited Oct 20, 2016 at 10:15 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked Oct 20, 2016 at 10:14 arcyarcy 13.2k1616 gold badges6464 silver badges115115 bronze badges 8

• 3 Remove the empty each() and use on() instead of bind() – Rory McCrossan Commented Oct 20, 2016 at 10:14
• 1 Function parameter to $.fn.each() is mandatory and anyway, just using .each() doesn't make sense – A. Wolff Commented Oct 20, 2016 at 10:16
• 1 @arcy Ya, like most prototype jQuery method, it internally loops through matched set – A. Wolff Commented Oct 20, 2016 at 10:17
• 1 Also, this will be a DOM Element which you can't call closest() on - you need to wrap it in a jQuery object. Your find() selector also is incorrect, presumably it needs a . class prefix – Rory McCrossan Commented Oct 20, 2016 at 10:22
• 1 @RoryMcCrossan On some browsers, you can but you are right, obviously not what OP was expecting (because then he calls find()/html()/val()) – A. Wolff Commented Oct 20, 2016 at 10:24

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 3

You have a few issues here:

• each() requires a handler function and is the cause of your error. That said, it's not needed in this instance.
• you should use on() over bind() since jQuery 1.7.
• this will be a DOM Element which you cannot call jQuery's closest() method on. Admittedly there is a native closest() method, but it's not well supported yet. For the code to work reliably you need to wrap this in a jQuery object.
• find() requires a valid selector, which dlsRowCharge is not. Presumably this should be .dlsRowCharge
• math should be Math

With all that said, try this:

$("#lineCountTable").find('input').on('keyup', function() { 
    updateTotal($(this)); 
});

function updateTotal($inputVar) {
    var $row = $inputVar.closest('tr');
    var lineCharge = $row.find("dlsRowCharge").html().trim();
    var lineCount = parseFloat($inputVar.val()) || 0;
    var total = Math.abs(lineCount * lineCharge).toFixed(2);
    $row.children('.dlsRowTotal').html('$ ' + total);
}

本文标签： javascriptjQuery error quotcannot read property 39call39 of undefinedquotStack Overflow