0

我创建了一个负责显示模式窗口的链接。模态窗口显示正常，但我必须单击两次...如何修复？

带有链接的html代码：

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

jQuery 启动函数：

<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);

但他可能很好

4

2 回答 2

3

尝试改变

$(this).ready(function(){

对此：

$(document).ready(function(){

查看代码后编辑：

发生这种情况是因为您正在链接到重新加载页面的参数。因此，Jquery 在单击时执行其操作，但随后页面刷新，将其恢复到初始状态。第二次鼠标单击不会更改 url，因为您已经加载了这些参数，因此 jquery 会显示弹出窗口。

您可以从链接中取出 href="" ，您会看到您仍然可以单击它们，但它们不会重新加载 url 并且一切都按预期工作。

于 2012-06-09T08:41:03.163 回答
0

.on()由于您正在使用动态生成的 HTML ，因此我会将 click 事件处理程序从整个混乱中移到其单独的函数中。

基本上，在 document.ready 函数中，调用一个处理点击事件的函数，如下所示：

function PopupHandlers() {

  $('body').on({

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

  }, '.YouPopupSelectorClass');

}

我认为你的代码一次做了太多的事情，应该分解成几个函数。甚至你的台词一次做不止一件事。例如，而不是$('#SomeDiv').html('some super super long concatenation);你应该有

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

这样，我们可以在您创建 HTML 时看到它实际上是什么，而不是有一个难以理解的超长行。而且你的变量应该比单个字母更明确：你希望你的源代码有明确的变量，然后用像谷歌闭包编译器这样的压缩器编译你的 javascript，它将用单个字母重命名你的变量。

但总的来说，在生成 HTML 并希望将其绑定到某些事件处理程序时，请考虑使用.on()而不是任何时候。.click()

于 2012-06-09T10:45:57.940 回答