jQuery加载的数据不像它应该触发模态

问题描述 投票:1回答:1

[好,我有一张国家/地区的地图,用户单击他们的州,然后通过jQuery这样的页面加载一堆供应商:

$('#sa').click(function () {
    $('#mapimg').hide();
    $('<div id="info">&nbsp;</div>').load('dealers.php?state=sa', function () {
        $(this).hide()
            .appendTo('#dealers')
            .slideDown(3000);
    });
});

然后,当它显示交易时,我希望用户能够单击每个经销商旁边的“联系我们”,并在其中有一个包含联系表格的模式跳转。但这似乎并没有触发。在点击上什么也没做。

这里是触发模式框的jQuery代码:

$(document).ready(function () {
    //select all the a tag with name equal to modal
    $('a').click(function (e) { //I have tried everything here, div, a[name=something], li, etc
        //Cancel the link behavior
        e.preventDefault();

        //Get the A tag
        var id = $(this).attr('href');

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({ 'width': maskWidth, 'height': maskHeight });

        //transition effect     
        $('#mask').fadeIn(1000);
        $('#mask').fadeTo("slow", 0.8);

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        $(id).css('top', winH / 2 - $(id).height() / 2);
        $(id).css('left', winW / 2 - $(id).width() / 2);

        //transition effect
        $(id).fadeIn(2000);

    });

    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();

        $('#mask').hide();
        $('.window').hide();
    });

    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });
});

以下代码在加载的内容之外起作用,但在内部不起作用。有人知道吗?

<a href='#dialog2' class='openmodal'>Open Modal Box</a>
jquery modal-dialog
1个回答
2
投票
使用动态加载的内容,您只需使用实时绑定。请使用jQuery live events。假设联系人链接的类为“ clsContact”,则可以将对话框打开登录名放在函数“ OpenModal”中,并像这样绑定链接:

$("a.clsContact").live('click', OpenModal);

© www.soinside.com 2019 - 2024. All rights reserved.