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

Question

我想我可能会遗漏一些东西或者没有掌握jQuery的基础知识.我已搜索了几个小时但尚未找到我的问题的答案.

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

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

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

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

代码,这似乎阻止displayData使用onClick正如所谓的对象预期调用函数.我已经将该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

init代码应该进入.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>

jQuery的:

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

注意:您必须使用jQuery .attr()或本机.getAttribute()方法来检索"data-"值.

我一直都在使用'data-'.