Присоединить функцию JQuery для ссылки на класс

Question

Я новичок в jquery и немного смущен тем, как присоединить функцию щелчка к классу ссылок.

Первоначально я подключил функцию OnClick к идентификатору ссылки себя следующим образом:

<div class="summary" style="display:none"></div> 
<a id="moreAbout" href="#" >More about #{machine.client_name}</a> 

<script> 
    "#moreAbout".onClick(function(event) { 
    event.stop(); 
    $$('.summary')[0].slide(); 
    $$('.summary')[0].load("/machine"); 
    }); 
</script> 

и функциональность работала просто отлично. (В принципе, есть ссылка, которую вы нажимаете, чтобы показать и скрыть div)

Теперь мне нужно прикрепить одну и ту же функцию к нескольким ссылкам. Я пробовал каждый совет, который я могу найти, и я думаю, что может возникнуть проблема с привязкой функциональности к классу ссылок.

Самым популярным решением я нашел следующее:

<div class="summary" style="display:none"></div> 
<a class="moreAbout" id="alink" "href="#" >More about #{machine.client_name}</a> 

<script> 
    $('a.moreAbout').click(function(event) { 
    event.stop(); 
    $$('.summary')[0].slide(); 
    $$('.summary')[0].load("/machine"); 
    }); 
</script> 

, и я не могу показаться, чтобы сделать метод прикрепить к нему, не говоря уже убедиться, что функциональность работает.

Любое понимание того, почему это может не работать?

Answer 1

Использование индекса с обращенным, что в DOM объект

slide и load методы, доступные на JQuery объекты. Поэтому вам нужно снова преобразовать DOM в jQueryObject, чтобы заставить его работать.

Также достаточно только одного $.

$($('.summary')[0]) -> Нужно снова преобразовать объект JQuery

Код

$('a.moreAbout').click(function(event) { 
    event.preventDefault(); 
    var $summary = $($('.summary')[0]); 
    // The DOM object again converted to jQuery object and stored in 
    // $summary variable. 
    // Now you can apply jQuery method for this object 

    $summary.slide(); 
    $summary.load("/machine"); 
}); 

Answer 2

Попробуйте следующее:

<script> 
$(document).ready(function(){ //this makes sure the dom is loaded 
    $('a.moreAbout').click(function(event) { 
    event.preventDefault(); //prevent the default action 
    $(this).prev('.summary').slideDown(); //only one $ needed, get the prev parent, 
     //slide is not an event, use slideDown() 
    $(this).prev('.summary').load("/machine"); 
    }); 
}); 
</script>