javascript - 将 javascript onclick 事件更改为 jquery click 并仍然传递参数

Question

我想我可能遗漏了什么或者没有掌握 jQuery 的基础知识。我已经搜索了几个小时，但仍未找到问题的答案。

我有一个旧网站，我正在升级它以使用 jQuery，许多链接调用一个传递多个参数的 JavaScript onClick 调用，如下例所示:

<a href="#" onclick="displayData('Book Title', 'ISBN', 'dateOfPublishing', 'Price');">View Details</a>

问题是我用各种 jQuery 代码更新了旧的 displayData 函数并且 displayData 函数在

$(document).ready(function() { 
});

代码，这似乎阻止了使用 onClick 调用函数 displayData，因为它说 object expected。我已将 displayData 函数从 $(document).ready() 中移出，但这样做会阻止对 $ 中其他函数的引用(document).ready() 正在引用的代码。

下面是我所拥有内容的缩减示例:

<script>
  $(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;
    }


  });
</script>


<table>
  <tr><td><a href="#" class="reviewLink" onclick="displayData('Book Title', '1234141HABJA1', '2010-01-12', '$15.99');">View Reviews</a></td><td>Book Title</td></tr>
  <tr><td><a href="#" class="reviewLink" onclick="displayData('Book TItle 2', '516AHGN1515', '1999-05-08', '$25.00');">View Reviews</a></td><td>Book Title 2</td></tr>
</table>

我想做的是能够删除链接中的 onclick="displayData();" ，取而代之的是一个 jQuery 点击引用，比如

$('a.reviewLink').click(function() {
  displayData(parameters go here....);
});

我只是不知道如何将参数从链接传递给函数，因为它们不再位于 HTML onclick 属性中。

如果我继续在链接中使用 onclick 属性，并将 displayData(params) 移出 $(document).ready() 代码块，它工作正常，但是当我尝试引用 $(document).ready() 代码块中的任何其他函数时，我得到了可怕的 对象其他函数(例如 DisplayReviews(param))的预期 错误。

我不知道这是否有任何意义......如果它令人困惑，我很抱歉，我不是世界上最好的程序员，也不一定知道所有的术语，所以我已经尽力解释了。我希望你能帮上忙。

非常感谢

Answer 1

初始化代码应该进入 .ready()，而不是你的库函数，那些可以在单独的 .js 文件中定义。

<script src="yourFunctions.js"></script>
<script>
    $(document).ready(function(){

         $('a.reviewLink').click(function() {
             displayData(parameters go here....); // in yourFunctions.js
         });

    });
</script>

在不使用内联 javascript 的情况下传递内联参数的替代方法是在标签上使用 HTML5 的“data-”属性。您也可以在 xhtml、html 等中使用它，而且它可以正常工作。

html:

<div data-name="Jack" data-lastname="black">My name is</div>

j查询:

 $('div').click(function(){
      alert($(this).attr('data-name') + ' ' + $(this).attr('data-lastname'));
 });

注意:您必须使用 jQuery 的 .attr() 或 native .getAttribute() 方法来检索“data-”值。

我自己一直使用“data-”。