Question

I don’t know why I can’t assign a value captured by .hover function to a variable declared globally.

Here is my jQuery code:

jQuery(function($){

  var receipt;

  $("#cartItems tr.cItem").hover(

        function()
        {
            $(this).addClass("highlight");
            receipt = $(this).next().children().text();
            console.log(receipt);
        },
        function()
        {
            $(this).removeClass("highlight");
        }
    );

    console.log(receipt);

  });

And here is my HTML:

<table id="cartItems">
  <tr>
     <td>Lp.</td><td>z:</td><td>na:</td><td>cena netto:</td>
  </tr>
  <tr class="cItem">
      <td>ru</td><td>pl</td><td>16.00</td>
  </tr>
  <tr>
      <td colspan="4">some simple text that should be assigned </td>
  </tr>
 </table>

First console.log(receipt) (inside .hover function) works fine and outputs some simple text.. and the second outputs nothing.

Please help.

Thank You All for so quick reply. You All are absolutely right about .hover function. My fault. But now I have another related problem.
I need this value to pass it to “qTip” plugin called like this:

$("#cartItems tr.cItem").qtip(
{
    content: receipt,
    show: 'mouseover',
    hide: 'mouseout'
 });

Should I merge somehow this calls ?

Answer 1

As others have mentioned, where you currently have placed the console.log(receipt) , receipt will not yet have been initialized.

If you want to change this to something more meaningful you can:

1. Move your variable declaration outside of the on load function
2. Call console.log(receipt) in its own function which you can attach to a click event or any other action after the load function.

var receipt;

jQuery(function ($) {
    $("#cartItems tr.cItem").hover(

    function () {
        $(this).addClass("highlight");
        receipt = $(this).next().children().text();
        console.log(receipt);
    }, function () {
        $(this).removeClass("highlight");
    });

});

function printConsole() {
    console.log(receipt);
}

Here’s a jsfiddle demo showing this.

Notice when it firsts outputs the value it’s undefined since when the page first loads the hover event hasn’t fired so the variable is uninitialized. After you hover and click the link it now has a value.