jQuery-两次单击以启动函数_Jquery

jQuery-两次单击以启动函数

jquery

jQuery-两次单击以启动函数,jquery,Jquery,我创建了一个链接，负责显示模态窗口。模态窗口显示良好，但我必须单击两次。。。如何修复带有链接的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=

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

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


$（this）.ready（function（）{
$（'.runpl'）.plPopup（“…弹出html代码”）；
});

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

（函数（$）
{
var f={width:'650'，height:'150'，background:false，html:''，url:''，close:'close'}；
var g；
$.fn.plPopup=函数（d）
{
g=$.extend（{}，f，g，d）；
var e=1+Math.floor（Math.random（）*1024）；
if（g.background）
{
如果（！$（“div”）为（“#plup#u fade”））
{
$（“正文”）。附加（“”）；
$（“#plup#u fade”+e）.hide（）
}
}
$（“正文”）。附加（“”）；
$（“#plup#u msg”+e）.html（“”）；
如果（g.html）
{
$（“#plup_msg”+e+”.plup_data”）.html（g.html）
}否则
{
if（g.url）
{
$（“#plup_msg”+e+”.plup_data”）.load（g.url，函数（a，b，c）
{
如果（b==“错误”）
{$（“#plup_msg”+e+”.plup_data”）.html（'plPopup:Error loading data=（'）}
})
}else{$（“#plup_msg”+e+”.plup_data”）.html（'plPopup:Nothing to render！=（'））
}
}
$（“#plup_msg”+e）.hide（）；$（此项）。单击（函数（）{$（“#plup_fade”+e）.show（）；$（“#plup_msg”+e）.fadeIn（'slow'））；
$（“#plup#u msg”+e+”。plup#u关闭a，#plup#u淡出“+e）。单击（函数（）
{
$（“#plup#u msg”+e）.淡出（'slow'）；$（“#plup#u fade”+e）.延迟（8000）.隐藏（）
});
还这个
}
})（jQuery）；

但他很好，也许

试着改变一下

$(this).ready(function(){

为此：

$(document).ready(function(){

查看代码后进行编辑：

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

您可以从链接中取出href=“”，您将看到您仍然可以单击它们，但它们不会重新加载url，所有内容都按预期工作。

尝试更改

$(this).ready(function(){

为此：

$(document).ready(function(){

查看代码后进行编辑：

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

由于您使用的是动态生成的HTML，因此我将使用

.on（）

将单击事件处理程序从整个混乱中移动到其单独的函数中

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

function PopupHandlers() {

  $('body').on({

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

  }, '.YouPopupSelectorClass');

}

我认为你的代码一次做的事情太多了，应该分解成几个函数。甚至你的代码行一次做的事情也不止一件。例如，你应该使用

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

通过这种方式，我们可以在创建HTML时看到HTML的实际内容，而不是很难理解的超长行。而且，变量应该比单个字母更显式：您希望源代码具有显式变量，然后使用类似于google closure的小型编译器编译javascript，该编译器将重命名您的va带有单个字母的字母

但总的来说，请看使用

.on（）

而不是

.click（）

来生成HTML并希望它绑定到某个事件处理程序。

因为您使用的是动态生成的HTML，所以我会使用

.on（）

将click事件处理程序从整个混乱中移到单独的函数中

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

function PopupHandlers() {

  $('body').on({

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

  }, '.YouPopupSelectorClass');

}

我认为你的代码一次做的事情太多了，应该分解成几个函数。甚至你的代码行一次做的事情也不止一件。例如，你应该使用

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

但总的来说，在生成HTML并希望将其绑定到某些事件处理程序时，请使用

.on（）

而不是

。单击（）

这个plpopup脚本是什么，我在哪里可以得到它？是你自己写的plpopup脚本，还是从网站上写的？我需要查看所有代码的工作副本，以便在这一点上真正有所帮助。我已经加载并浏览了你提供的代码，我根本无法显示模式弹出窗口。zip中的所有文件David Stetler，知道如何修复？）这个plpopup脚本是什么，我在哪里可以得到它？是你自己写的plpopup，还是从一个网站上写的？我需要看到所有代码的工作副本，以便在这一点上真正有所帮助。我已经加载并浏览了您提供的代码，我根本无法显示模式弹出窗口。zip中的所有文件David Stetler，知道如何修复吗？）您要求太多了；要帮你爬上一堵代码墙真的很难。可能您可以a）应用我关于动态事件处理程序和代码重构的建议，b）隔离问题，c）使用隔离的问题创建JSFIDLE。但我们不能透过h看