8

ユーザーがリンクをクリックしたときに jquery モーダル ダイアログ ボックスを開こうとしています。次に、外部のphpファイルをダイアログボックスにロードしたいと思います。私はこのjqueryを使用しています：

$(document).ready(function() { 
     $('#register').dialog({
         title: 'Register for LifeStor',
         resizable: true,
         autoOpen:false,
         modal: true,
         hide: 'fade',
         width:350,
         height:275,
      });//end dialog   
      $('#reg_link').click (function() {
          open: (function(e) {
             $('#register').load ('register.php');
        });
      }); 
    });

そしてこのhtml：

<div id="register"></div>

これは、.css ファイルで display:none に設定されています。

さらに、フォーム内では、リンクは次のように呼び出されます。

<td><font size="2">Not registered? <a href="#" name="reg_link">Sign-Up!</a></td>

（テーブルをdivに変更します）。

このコードでエラーは発生しませんが、リンクをクリックしても何も起こりません。上記のほとんどは、他のスタック オーバーフローの投稿から取得しました。何か不足していますか？テーブルのhtmlが干渉していますか?

よろしく...

4

3 に答える 3

17

あなたのリンクで

<a href="#" name="reg_link">Sign-Up!</a>

あなたはname="reg_link"それを代わりにすべきですid="reg_link"、すなわち

<a href="#" id="reg_link">Sign-Up!</a>

したがって、次のコードで動作します

$('#reg_link').click(function(e) {
    e.preventDefault();
    $('#register').load('register.php');
});

それをダイアログにするためにあなたは使うことができます

$(document).ready(function() { 

     var dlg=$('#register').dialog({
        title: 'Register for LifeStor',
        resizable: true,
        autoOpen:false,
        modal: true,
        hide: 'fade',
        width:350,
        height:275
     });


     $('#reg_link').click(function(e) {
         e.preventDefault();
         dlg.load('register.php', function(){
             dlg.dialog('open');
         });
      }); 
});

ほんの一例です。

于 2012-08-14T21:21:01.863 に答える
2

ページを読み込んだ後にダイアログを作成する.load()と、コンテナのコンテンツが新しいコンテンツに置き換えられます

クリック ハンドラーに構文エラーがあります。関数とオブジェクトの組み合わせを引数として渡しているようです。通常の関数である必要があります。お気に入り

$('selector').click (function() {
     //code
});

また、<a>要素にはreg_linkIDではなく名前があります

$(document).ready(function() { 
    $('#reg_link').click (function() {
        $('#register').load ('register.php', function(){
            $('#register').dialog({
                title: 'Register for LifeStor',
                resizable: true,
                modal: true,
                hide: 'fade',
                width:350,
                height:275,
            });//end dialog   
        });
    });
});

<td><font size="2">Not registered? <a href="#" name="reg_link" id="reg_link">Sign-Up!</a></td>
于 2012-08-14T21:02:38.230 に答える
1

私はその.dialog()機能に完全に精通しているわけではありませんが、あなたの使い方は.click()間違っています。問題の一部は、中括弧に関する混乱{}です。それらは 2 つの完全に別個のものに使用されており、ここでは 2 つを混同しています。

中括弧の最初の使用法は、ブロックの内部 (ループの内部、条件の内部、関数の内部) を示すことです。例えば：

// some code in the global scope
function something()
{
    // some different code within this function block
}
// function's done, we're back in global scope

2 番目の使用法は、オブジェクトまたは連想配列の JSON (JavaScript Object Notation) です。プロパティまたは値は、次の形式で名前またはキーとペアになっています。

var jsonSomething = {
    key1: value1,
    key2: value2,
    etc: etcvalue,
};

を記述するときは$('#reg_link').click (function() {、JSON を開始するのではなく、中かっこで関数ブロックを開きます。open:したがって、 （これがJSONであり、キーを設定しているように）書くとopen、何かが期待どおりに機能しないことは間違いありません（私は驚いています...ちょっと...実際にはエラー)。これらの中括弧内に記述する必要があるのは、関数のコードです。この場合、おそらくこれだけです：

$('#reg_link').click (function() {
    $('#register').load ('register.php');
});

一般に、jQuery はこれらのバージョンの両方を頻繁に使用し、しばしばそれらを混合します (JSON を引数として受け入れる関数、または関数コールバックをエントリとして含む JSON)。そのため、どちらがどちらであるかを理解することが非常に重要です。

編集: 一部のグーグル re:.dialog()は、後にそれを呼び出す必要があることを示唆しています。.load()つまり、ブロックは次のようになります。

$('#reg_link').click (function() {
    $('#register').load ('register.php').dialog(/*argument(s) here*/);
});

あなた自身のコードに基づいて、.dialog()実際には JSON を引数として取る関数の例です。したがって、そのビットが正しいと仮定すると、完全なコードは次のようになります。

$('#reg_link').click (function() {
    $('#register').load ('register.php').dialog({
        title: 'Register for LifeStor',
        resizable: true,
        autoOpen: false,
        modal: true,
        hide: 'fade',
        width:350,
        height:275,
    });
});
于 2012-08-14T21:05:29.893 に答える