Уменьшения дублированного кода с помощью функции JQuery

Question

Нашел хороший Jquery всплывающей функцию здесь:

JAVASCRIPT 
$(function() { 
    $("#word1234").live('click', function(event) { 
     $(this).addClass("selected").parent().append(' 
      <div class="messagepop pop">"Lorem ipsum dolor sit amet, 
      consectetur adipisicing elit, sed do eiusmod tempor incididunt</div>'); 
     $(".pop").slideFadeToggle() 
     $("#email").focus(); 
     return false; 
    }); 
    $(".close").live('click', function() { 
     $(".pop").slideFadeToggle(); 
     $("#contact").removeClass("selected"); 
     return false; 
    }); 


HTML 
<a href='/word1234' id='word1234'>Supercalifragilisticexpialidocious</a> 

Есть ли более эффективный способ вызова этого всплывающего окна? Если у меня есть сотни определений на странице, я бы повторял много кода, казалось бы, излишне.

Если бы я делал это в родной JS, я бы просто установить функцию OnClick к HREF тега, что-то вроде

<a href="#" id="word1234" onClick="doPop(this, 'Lorem ipsum, ect.')">Supercalifragilisticexpialidocious</a> 

Есть ли подобный метод вызова функции в JQuery?

EDIT После некоторой отладки, рабочий вариант обновленного/фиксированного сценария можно найти здесь: http://jsfiddle.net/N4QCZ/13/ HTH.

Answer 1

Вы можете превратить код в jQuery Plugin, как это:

$.fn.myPopup = function(popupText){ 
    var popupHtml = '<div class="messagepop pop">' + popupText + '</div>'; 
    this.each(function(){ 
     $(this).click(function(){ 

      // Create the popup 
      $(this).addClass("selected").parent().append(popupHtml); 

      // Find the close button and attach click handler 
      $(this).find(".close").click(
       // Find, hide, then delete the popup 
       $(this).closest(".pop").slideFadeToggle().remove();; 
      ); 

     }); 
     return false; 
    }); 

    return this; 
}; 

Тогда ваш код будет выглядеть следующим образом:

$("#word1234").myPopup("Lorem Ipsum"); 
$("#wordABCD").myPopup("Hello World"); 

Answer 2

Не используйте live использования on, живой было нежелателен 1,7:

Вы могли бы дать вашим ссылкам всплывающего класс и сделать:

$(".popup").on("click", function() { 
    // Your code 
}); 

Таким образом, вы можете захватить все ссылки с popup класса и не являются обязательными к о событиях, то есть 100:

$("#id1").click() { } 
$("#id2").click() { } 

т.д.