2

今日の私の質問は、読み込まれたサブ テンプレートのボタンから呼び出せるように jQuery モーダルを更新することです。

私の場合、2kb の PopEasy modalを使用しています。私の Pyramid プロジェクトでは、メイン テンプレートの上にモーダルを配置しています。モーダルを開くボタンは、メイン テンプレートに読み込まれるサブ ページ テンプレートにあります。

ここに画像の説明を入力

<body id="body-dashboard">
    <div id="modalrequest" class="modal">
        <section id="intro-request">
            <h1>The Modal</h1>

読み込まれたテンプレート ページで生成されたマークアップ:

<td class="table-request-btn incoming-icon">
    <a href="#modalrequest" class="modalLink">Request Intro</a>
    <button class="modalLink" href="#modalrequest">Request Intro</button>
</td>



現在、モーダルjQueryのセットアップ方法では、動作させることができません。#body-dashboardメイン テンプレートのメイン コンテナの ID です。And.modalLinkは、読み込まれたテンプレート内にあるボタンのクラスです。

    // PopEasy for Request Intro
    var modalObj = $('#body-dashboard');
    //var modalObj = $('.modalLink');
    if (modalObj.length && modalObj.modal) {

        modalObj.modal({
            trigger: '.modalLink',
            olay:'div.overlay',
            modals:'div.modal',
            animationEffect: 'fadeIn',
            animationSpeed: 400,
            moveModalSpeed: 'slow',
            background: '000',
            opacity: 0.8,
            openOnLoad: false,
            docClose: true,
            closeByEscape: true,
            moveOnScroll: true,
            resizeWindow: true,
            close:'.closeBtn'
        });
    }



この問題に初めて遭遇したとき、動的に作成されたクラスをターゲットにしようとしたときの古い問題を思い出しました。

これが解決策でした：

$("body").on("click", ".register_unselected", function(){});



この手法を使用して、読み込まれたテンプレート ボタンにアラートを発生させることができました。

$("#body-dashboard").on("click", ".modalLink", function(){
    alert('this works!');
});



ただし、モーダルで同じものを使用しようとしてもまだ運がありません

var modalObj = $('#body-dashboard .modalLink');
modalObj.modal({
    trigger: '#body-dashboard .modalLink',



この問題にどのように取り組みますか? もっとコードを見る必要がありますか?

4

1 に答える 1

2

新しいテンプレートがロードされた後、モーダル init 関数を呼び出す必要があります。

于 2013-06-28T15:04:45.870 に答える