0

バックグラウンド

動的コンテンツをロードするダイアログを作成するために JQuery UI プラグインを使用しています。

そこで、A、B、C、D、E の値を含むチェックボックスを含む一連の選択可能な項目を表示する html ドキュメントをロードします。

「A、C、E」にチェックを入れたとしましょう

サーバーへの AJAX 呼び出しを利用する送信ボタンを押します。サーバーは「A、C、E」というデータを取り込み、一連のクエリを実行して、データの内容を保持するデータと html を吐き出します。お気に入り：

<input id="radio1" name="selGroup" type="radio" value="1"><p class="test"> 1 </p>
<input id="radio3" name="selGroup" type="radio" value="3"><p class="test"> 3 </p>
<input id="radio5" name="selGroup" type="radio" value="5"><p class="test"> 5 </p>
<input id="enterBttn" type="button" value="Submit">

この html コンテンツはクライアントに返され、次の場所にダンプされます。

<div id="dialogCheck" title="Select one of these options"></div>

これは、jQuery を使用して行われます。

$("#dialogCheck").html(content);

テスト

そのため、すべてが機能しているかどうかを確認しましたが、機能しています。ラジオ ボタンと選択したい値を含むダイアログ ボックスが表示されます。しかし、今はインタラクティブ性を追加したいと思っています。

問題

サーバーから挿入された html でダイアログ ボックスを開くと、画面にコンテンツが表示されますが、元のソース コードで新しい html を表示したい場合。存在しません。次のように表示されます。

 <div id="dialogCheck" title="Select one of these options"></div>

JQueryの「$("#dialogCheck").html(content);」を使ったところ 挿入します。ドキュメントを読んだところ、元のソース コードに html を追加しない方法が記載されていました。私の質問は、挿入した html の上に JQuery スクリプトを追加するにはどうすればよいですか?

ザ・ウィアード

次のようなものを渡すと:

$("#enterBttn").click(function(){ 
     $( "#dialogCheck" ).dialog("destroy");
 });

できます！私が作成した enterBttn は、ダイアログ ボックスを破棄します。ただし、ホバー機能を追加したい場合 (ダイアログ ボックスの上にテキストを強調表示したり、div のアウトラインを表示したい場合など) は、元のソース コードには存在しないため機能しません。

$(".test").hover(
    function(){
        $(this).append($("<span> ***</span>"));
    },
    function(){
        $(this).find("span:last").remove();
});
4

3 に答える 3

1

新しい HTML が「元のソース コード」に含まれているかどうかに違いはありません (ただし、デバッグが容易になり、クライアント側でユーザーがページを簡単に保存できることを除きます)。しかし、本当に「元のソース コード」に何かを入れたい場合は、AJAX を使用しないでください。その代わりに、ページ全体をリロードして、サーバー側に追加の HTML を挿入する必要があります。

したがって、HTML ソースに関係なく、すべてが機能するはずです。コードを実行するタイミングが間違っているため (たとえば、新しい HTML を挿入する前)、コードが機能しないと思います。詳細を追加していただけますか？

于 2012-07-09T14:36:25.283 に答える
1

AJAX を介して挿入された html 要素に対してイベント処理を使用できます。そのためには jquery ON() http://api.jquery.com/on/関数を使用できます。古いバージョンの jquery を使用している場合は、LIVE() 関数を使用します。

于 2012-07-09T14:57:58.683 に答える
0

さて、何が起こったのかを理解しました：

これらは両方とも機能しました：

$("#enterBttn").hover(function(){
    $(".attriblst").append($("<span> ***</span>"));;
}, function(){
    $(".attriblst").find("span:last").remove();
});

と：

$("#dialogCheck").on({
    mouseenter: function(){
        $("p").append($("<span> ***</span>"));
    },
    mouseleave: function(){
        $("p").find("span:last").remove();
    }
 },"#enterBttn");

何が起こったのかは、コードを挿入した場所のスコープでした。私はそれらをドキュメントの準備ができている部分に置いていました。それを取り出して、ダイアログボックスを呼び出すために使用した関数（ドキュメントの準備の外側）に配置すると、うまくいきました！みんなありがとう ：）

于 2012-07-09T16:36:00.180 に答える