0

私は、4つの構成可能なセクションを含むページを作成しようとしています。これらのセクションはすべて、ユーザーに同じ入力を提供しますが、最終的には4つの固有の構成設定になります。

私はこれを行うために汎用ベースページを使用していますが、Jqueryセレクターが異なるdiv内のセクション間の違いを区別できないが、すべて同じページから発生しているという問題が発生しました。最初は、これは実装固有のものだと思ったので、より小さなテストページを作成しましたが、最終的には同じ問題があるようです。

test.htmlは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.24.custom.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () 
{
    $('#div1').load("test2.html");
    $('#div2').load("test2.html");
});
</script>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

test2.htmlは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.24.custom.min.js"></script>
</head>
<body>
<script type="text/javascript">
function testing()
{
    alert("Alert: " + $('#test').val());
}
</script>
<div id="testing">
<input id="test" onchange="testing()"></input>
</div>
</body>
</html>

これが正しい方法ではない場合は、おそらくiframeを使用できると思いますが、他のページを格納しているページの入力ボックスから値にアクセスできます。

私はこれをubuntufirefox15.0.1でテストしました

ありがとう。

4

2 に答える 2

1

まず第一に、jQueryのload（）メソッドで完全なHTMLドキュメントを使用するべきではありません。divの内容のみを内部に含める必要があります。たとえば、doctype、html、bodyタグはありません。体そのもの。

次に、要素識別子はどのページでも一意である必要があります。最初のdivのコンテンツをロードすると、id=testingのdiv要素が作成されます。2回目にロードすると、同じ識別子を使用して別のコピーを作成しようとします。

識別子は一意である必要があります。（これは彼らが識別する方法です...）

別の解決策は、コンテンツをajax（）でロードし、Javascriptコードから識別子を置き換え、最後に$（ "＃div1"）。html（replaced_html_content）を呼び出すことです。しかし、私があなたなら、私はそれをしません。サーバーサイドスクリプトを使用し、代わりにクエリパラメータを提供します。

于 2012-10-03T07:25:58.820 に答える
0

■test2.htmlに変更を加えることができない場合は、以下のようなコードを使用できます。以下のコードは、要素の本体セクションのみを取得します。

$('#div1').load('test2.html body');

test2.htmlに変更を加えることができる場合は、すべてのスクリプトと本文の部分を削除し、必要なものだけが含まれていることを確認してください。

または、必要なHTML部分を保持するラッパーを配置できるとよいでしょう。次に、このように特定のdivを取得できます。

$('#div1').load('test2.html #container');

div名を具体的に言うのではなく、このキーワードを使用します。入力が変更されたdivを取得できます。

以下のリンクを確認してください。それはあなたを助けるでしょう。デモを試してください。

これがお役に立てば幸いです。ご不明な点がございましたら、お気軽にお問い合わせください。

于 2012-10-03T07:34:33.550 に答える