0

モーダル ウィンドウの表示を担当するリンクを作成しました。モーダル ウィンドウは正常に表示されますが、2 回クリックする必要があります。修正方法は?

リンク付きの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 はクリックで処理を実行しますが、ページが更新されて初期状態に戻ります。2 回目のマウス クリックでは、これらのパラメーターが既に読み込まれているため、URL は変更されないため、jquery はポップアップを表示します。

リンクから href="" を取り出すと、それらをクリックすることはできますが、URL をリロードせず、すべてが期待どおりに機能します。

于 2012-06-09T08:41:03.163 に答える
0

.on()動的に生成された HTML を使用しているため、クリック イベント ハンドラーを混乱から別の関数に移動します。

基本的に、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 を作成しているときに HTML が実際に何であるかを確認できます。また、変数は単一文字よりも明示的である必要があります。ソース コードに明示的な変数を含め、変数の名前を単一文字で変更する Google クロージャー コンパイラなどのミニファイアを使用して JavaScript をコンパイルします。

しかし、全体として、 HTML を生成しているとき.on()にいつでも使用するのではなく、使用することを検討し、.click()それを何らかのイベント ハンドラーに結び付けたいと考えています。

于 2012-06-09T10:45:57.940 に答える