CODEWITHSUNDEEP
jquery
a coder
a coder

Reputation: 7639

Reducing duplicated code with JQuery function

Found a good jquery popup function here: 

 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>

Is there a more efficient way of invoking this popup? If I have hundreds of definitions on a page I'd be repeating a lot of code seemingly unnecessarily.

If I were doing this in native JS, I'd just set a onClick function to the href tag,something like

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

Is there a similar method of calling a function in JQuery?

EDIT After some debugging, a working version of the updated/fixed script can be found here: http://jsfiddle.net/N4QCZ/13/ hth.

Upvotes: 4

Views: 699

Answers (2)

KevSheedy
KevSheedy

Reputation: 3265

You could turn the code into a jQuery Plugin like this:

$.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;
};

Then your code would look like this:

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

Upvotes: 2

Darren
Darren

Reputation: 70728

Don't use live use on, live was deprecated as of 1.7:

You could give your links a popup class and do:

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

That way you can capture all links with the popup class and are not binding to 100's of events, i.e:

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

etc.

Upvotes: 1

Related Questions