title: Change javascript onclick event to jquery click and still pass parameters
body: <p>I think I may be missing something or haven't grasped a fundamental of jQuery. I have searched for hours but yet to find an answer to my question.</p>
  
  <p>I've got an old website that I'm upgrading to use jQuery and many of the links call a JavaScript <code>onClick</code> call that passes multiple parameters, as per the example below:</p>
  
  <pre><code>&lt;a href="#" onclick="displayData('Book Title', 'ISBN', 'dateOfPublishing', 'Price');"&gt;View Details&lt;/a&gt;
  </code></pre>
  
  <p>The problem is that I've updated the old <code>displayData</code> function with various jQuery code and the <code>displayData</code> function is within the </p>
  
  <pre><code>$(document).ready(function() { 
  });
  </code></pre>
  
  <p>code, and this seems to prevent the function <code>displayData</code> being called using the <code>onClick</code> as it says <em>object expected</em>. I've moved the <code>displayData</code> function out from the <code>$(document).ready()</code> but by doing so, this has prevented references to other functions within the <code>$(document).ready()</code> code being referenced.</p>
  
  <p>A cut down example of what I have is below:</p>
  
  <pre><code>&lt;script&gt;
    $(document).ready(function() {
      function displayData(title, isbn, dt, price) {
        // there's a call to jQuery AJAX here
          $.ajax({
              type: "POST",
              contentType: "application/json; charset=utf-8",
              url: "WebServices/BookService.asmx/GetBookReviews",
              data: "{isbn: '" + isbn + "'}",
              dataType: "json",
              success: function(msg) {
                  DisplayReviews(msg.d);
              }
          });
        return false;
      }
  
      function DisplayReviews(data) {
         // data normally formatted here and passed to formattedData variable
         var formattedData = FormatData(data);
         $('#reviewScreen').html(formattedData);
      }
  
      function FormatData(data) {
        // function reformats data... code removed for space..
        return data;
      }
  
  
    });
  &lt;/script&gt;
  
  
  &lt;table&gt;
    &lt;tr&gt;&lt;td&gt;&lt;a href="#" class="reviewLink" onclick="displayData('Book Title', '1234141HABJA1', '2010-01-12', '$15.99');"&gt;View Reviews&lt;/a&gt;&lt;/td&gt;&lt;td&gt;Book Title&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;&lt;a href="#" class="reviewLink" onclick="displayData('Book TItle 2', '516AHGN1515', '1999-05-08', '$25.00');"&gt;View Reviews&lt;/a&gt;&lt;/td&gt;&lt;td&gt;Book Title 2&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>What I'd like to do is to be able to remove the <code>onclick="displayData();"</code> within the link and instead us a jQuery click reference, something like </p>
  
  <pre><code>$('a.reviewLink').click(function() {
    displayData(parameters go here....);
  });
  </code></pre>
  
  <p>I just don't know how I'd pass the parameters to the function from the link as they would not longer be in the HTML <code>onclick</code> attribute.</p>
  
  <p>If I continue to use the <code>onclick</code> attribute in the link, and move the <code>displayData(params)</code> out of the <code>$(document).ready()</code> code block, it works fine, but the moment I try and reference any of the other functions within the <code>$(document).ready()</code> code block I get the dreaded <em>object expected</em> error with the other functions such as <code>DisplayReviews(param)</code>.</p>
  
  <p>I don't know if this makes any sense.... sorry if it's confusing, I'm not the worlds best programmer and don't know all the terminology necessarily, so have tried as best I can to explain. I hope you can help.</p>
  
  <p>Many thanks</p>