将javascript onclick事件更改为jQuery点击并仍然传递参数

Question

我想我可能会错过某些东西或者没有掌握jQuery的基础知识。我已经搜索了几个小时，但还没有找到我的问题的答案。

我有一个旧的网站，我升级到使用jQuery和许多链接调用JavaScript onClick调用，通过多个参数，如下面的例子：

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

的问题是我已经更新了旧displayData功能与各种jQuery代码和displayData功能是

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

代码中，这似乎防止功能displayData采用t被称为他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

初始化代码应该进入。就绪（），不是你的库函数，这些可以在一个单独的.js文件中定义。

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

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

    }); 
</script> 

路过内嵌参数不使用内联JavaScript的替代，是使用HTML5的“数据 - ”属性上的标签。你可以在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-'。

Answer 2

正如Skilldrick所指出的那样，displayData不需要在文档就绪包装器中定义（也可能不应该）。

你想要使用jQuery点击事件分配而不是onClick是正确的 - 它使你的代码更易于阅读，并且它是Unobtrusive Javascript原理所要求的。

至于你想通过的参数，有几种方法可以去完成这项任务。如果您不关心XHTML合规性，则可以简单地将一些自定义属性放在链接上，然后通过脚本访问它们。例如：

<a href="#" booktitle="Book Title" isbn="ISBN" pubdate="Publish Date" price="Price">View Details</a> 

然后在点击事件：

$('a.reviewLink').click(function() { 
    var booktitle = $(this).attr('booktitle'); 
    var isbn = $(this).attr('isbn'); 
    var pubdate = $(this).attr('pubdate'); 
    var price = $(this).attr('price'); 
    displayData(booktitle, isbn, pubdate, price); 
}); 

我在这里肯定有人会谴责这种方法作为最黑暗的邪恶，但它一直运作良好，我过去。或者，你可以按照每一个环节有一个隐藏的一组数据，比如：在点击事件.book-data { display: none; }，然后：

<a href="#">View Details</a> 
<ul class="book-data"> 
    <li class="book-title">Book Title</li> 
    <li class="book-isbn">ISBN</li> 
    <li class="book-pubdate">Publish Date</li> 
    <li class="book-price">Price</li> 
</ul> 

创建CSS规则隐藏数据列表

$('a.reviewLink').click(function() { 
    var $bookData = $(this).next('.book-data'); 
    var booktitle = $bookData.children('.book-title').text(); 
    var isbn = $bookData.children('.book-isbn').text(); 
    var pubdate = $bookData.children('.book-pubdate').text(); 
    var price = $bookData.children('.book-price').text(); 
    displayData(booktitle, isbn, pubdate, price); 
}); 

有很多方法可以完成你的任务，但这些是最快想到的两个。

Answer 3

我这样做了，所以即使问题得到解答，其他人可能会觉得有帮助。 http://jsbin.com/axidu3

HTML

<table border="0" cellspacing="5" cellpadding="5"> 
    <tr> 
     <td> 
      <a href="#" class="reviewLink">View Reviews</a> 
      <div class="displayData"> 
       <span class="title">Book Title 2</span> 
       <span class="isbn">516AHGN1515</span> 
       <span class="pubdata">1999-05-08</span> 
       <span class="price">$25.00</span> 
      </div> 
      </td> 
     <td>Book Title 2</td> 
    </tr> 
</table> 

的JavaScript

<script type="text/javascript" charset="utf-8"> 
    jQuery(".reviewLink").click(function() { 
     var title = jQuery(".title", this.parent).text(); 
     var isbn = jQuery(".isbn", this.parent).text(); 
     var pubdata = jQuery(".pubdata", this.parent).text(); 
     var price = jQuery(".price", this.parent).text(); 

     displayData(title, isbn, pubdata, price); 
    }); 

    function displayData(title, isbn, pubdata, price) { 
     alert(title +" "+ isbn +" "+ pubdata +" "+ price); 
    } 
</script> 

CSS

<style type="text/css" media="screen"> 
    .displayData { 
     display: none; 
    } 
</style>