CODEWITHSUNDEEP
jquery
Oleg Beat
Oleg Beat

Reputation: 337

jQuery - two times click to start function

I created a link which is responsible for showing up modal window. The modal window shows up fine, but i must click two times... How to fix?

html code with links:

<body>
<a href="?id=1#" class="runpl">Buy product #1</a>
<br/><a href="?id=2#" class="runpl">Buy product #2</a>
</body>

jQuery start functions:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="plPopup.min.js"></script>
<script type="text/javascript">

$(this).ready(function(){

        $('.runpl').plPopup("..popup html code..");

});

</script>

plPopup.min.js:

(function($)
{
    var f = {width:'650',height:'150',background:false,html:'',url:'',close:'close'};
    var g;

    $.fn.plPopup=function(d)
    {
        g=$.extend({},f,g,d);
        var e=1+Math.floor(Math.random()*1024);
        if(g.background)
    {
        if(!$("div").is("#plup_fade"))
        {
            $("body").append('<div id="plup_fade'+e+'" class="plup_fade"></div>');
            $("#plup_fade"+e).hide()
            }
    }

    $("body").append('<div id="plup_msg'+e+'" class="plup_msg" style="width:'+parseInt(g.width)+'px; min-height:'+parseInt(g.height)+'px; height:'+parseInt(g.height)+'px; margin-top: -'+(parseInt(g.height)/2)+'px; margin-left: -'+(parseInt(g.width)/2)+'px;"></div>');


    $("#plup_msg"+e).html('<div class="plup_close" style="text-align:right;"><a href="#" title="'+g.close+'"><img src="img/popup/close.png"/></a></div><div class="plup_data"></div>');

    if(g.html)
    {
        $("#plup_msg"+e+" .plup_data").html(g.html)
    }else
    {
        if(g.url)
        {
            $("#plup_msg"+e+" .plup_data").load(g.url,function(a,b,c)
            {
                if(b=="error")
                {$("#plup_msg"+e+" .plup_data").html('<b>plPopup:</b> Error loading data =(</div>')}
                })
                }else{$("#plup_msg"+e+" .plup_data").html('<b>plPopup:</b> Nothing to render! =(')
                }
                }
                $("#plup_msg"+e).hide();$(this).click(function(){$("#plup_fade"+e).show();$("#plup_msg"+e).fadeIn('slow')});
                $("#plup_msg"+e+" .plup_close a, #plup_fade"+e).click(function()
                {
                    $("#plup_msg"+e).fadeOut('slow');$("#plup_fade"+e).delay(8000).hide()
                });


    return this
    }

})(jQuery);

but he is fine maybe

Upvotes: 0

Views: 213

Answers (2)

frenchie
frenchie

Reputation: 51937

I would move the click event handler out of the whole mess into its on separate function using .on() since you're working with dynamically generated HTML.

Basically, in the document.ready function, call a function that handles the click event like this:

function PopupHandlers() {

  $('body').on({

     click: function () { YourClickHandler($(this)); }

  }, '.YouPopupSelectorClass');

}

I think your code does too many things at once and should be broken down into several functions. Even your lines do more than one thing at once. For instance, instead of $('#SomeDiv').html('some super super long concatenation); you should probably have

var TheHTML = 'some HTML';
TheHTML = TheHTML + 'some more HTML';
TheHTML = TheHTML + ' and some more HTML'; 
$('#SomeDiv').html(TheHTML);

That way, we can see what the HTML actually is as you're creating it instead of having a super long line that's hard to follow. And your variables should be more explicit than single letters: you want your source code to have explicit variables and then compile you javascript with a minifier like google closure compiler that will rename your variables with single letters.

But overall, look at using .on() instead of .click() anytime you're generating HTML and want it tied to some event handler(s).

Upvotes: 0

David Stetler
David Stetler

Reputation: 1451

try changing 

$(this).ready(function(){

to this:

$(document).ready(function(){

EDIT after looking at code:

This is happening because you are linking to a parameter which reloads the page. So Jquery does its thing on the click, but then the page refreshes which takes it back to its initial state. The second mouse click doesnt change the url because you already have loaded those paremeters, so the jquery displays the popup.

You can take out the href="" from the links and you will see you can still click on them but they dont reload the url and everything works as expected.

Upvotes: 3

Related Questions