Question

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

带链接的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);

但他很好也许

Answer 1

尝试更改

$(this).ready(function(){

到此：

$(document).ready(function(){

查看代码后编辑：

这种情况正在发生，因为您链接到重新加载页面的参数。所以Jquery在点击上做了它的事情，但随后页面刷新，使其恢复到初始状态。第二次鼠标点击不会更改URL，因为您已经加载了这些参数，因此jquery显示弹出窗口。

你可以从链接中取出href =“”，你会看到你仍然可以点击它们，但是他们不会重新加载网址，一切都按预期工作。

Answer 2

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

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

function PopupHandlers() {

  $('body').on({

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

  }, '.YouPopupSelectorClass');

}

我认为您的代码会同时执行太多操作，并且应该分解为多个函数。甚至你的线条也不止一件事。例如，您应该拥有<{p}}，而不是$('#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()。

jQuery - 两次点击启动功能

2 个答案: