Измените событие javascript onclick на jquery click и все равно передайте параметры

Question

Я думаю, что я что-то упустил или не понял основы jQuery. Я искал несколько часов, но пока не нашел ответа на свой вопрос.

У меня есть старый веб-сайт, который я обновляю для использования jQuery, и многие ссылки вызывают вызов JavaScript onClick, который передает несколько параметров, как показано в следующем примере:

<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

Код инициализации должен идти в .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-».

Answer 2

Как указал Skilldrick, displayData не нужно определять внутри готовой оболочки вашего документа (и, вероятно, не должно быть).

Вы правы в том, что хотите использовать событие нажатия jQueryприсваивание, а не onClick - это облегчает чтение вашего кода и требуется по принципу ненавязчивого 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);
});

Я уверен, что кто-то здесь осудит этот метод как самое темное зло, но он хорошо сработал дляя в прошлом.В качестве альтернативы вы можете перейти по каждой ссылке со скрытым набором данных, например так:

<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, чтобы скрыть список данных: .book-data { display: none; }, а затем в событии клика:

$('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>