jQuery：从另一个页面加载变量

Question

Could someone help me with this code?

In my Rails project I have a header that is fixed in position. One of the links is:

<li><%= link_to "Your Address Book", user_path(current_user), :class => 'random_number' %></li>

Then at the bottom of that same page I have:

  <script>
  var number = 1 + Math.floor(Math.random() * 6);

  $("random_number").click(function("#show_the_number")

           {
             alert(number);
           }
      );

   </script>

The code above doesn't work the way I want it to.

What I want to happen is:

//this part works ok

When the 'Your Address Book' link is clicked, load the page 'your address book' and the function 'random_number'

//here's the problem:

When the 'your address book' page loads, there's a button with id '#show_the_number'. When this button is clicked on that new page, I want to show the alert(number) message, with the random number from the fixed header.

Any ideas? Thanks.

Answer 1

i think what you are asking here is on delegated event..since your button is added dynamically for the click event to work you need to delegate it to its closest static parent

try this

 $(document).on('click',"#show_the_number",function(){
    var number = 1 + Math.floor(Math.random() * 6);
    alert(number);
});

it is recommended to delegate your event to closest parent container that is present when the page is loaded rather that document itself.

link to read more about .on

example:

$("#IdOfParentContainer").on('click',"#show_the_number",function(){
  ....