0

たとえば、次の名前の HTML がありますindex.html。

<html>
<head>
    <style>
        #content { float:left; }
        #sub { float:right; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="action.js"></script>    
</head>
<body>
    <h2>Test de</h2>
    <div id="content">
        Content
        <button class="loadSub">Load</button>
    </div>
    <div id="sub">
        Sub content
    </div>
</body>
</html>

そして、次の名前の単純な JS ファイルaction.js:

$(document).ready(function(){
    $('button.loadSub').click(function(){
        $('#sub').load('test.html');
    });

    $('button.hide').click(function(){
        $('#sub').fadeOut('slow');
    });
});

ご覧のとおり、ボタンをクリックすると.loadSub、div#subに次の新しいコンテンツが読み込まれtest.htmlます。

<h2>This is the sub content</h2>
<button class="hide">Hide</button>

ここで 2 つの問題が発生しました。

まず、.loadSubボタンは id の div を正常にロードしましたsubcontentが、.hideボタンは機能しませんでした。

第二に、挿入しようとした後

script type="text/javascript" src="action.js"

内部test.htmlでは、非表示ボタンが機能し、そのコンテンツがフェードアウトしました。しかし、その後、ボタンloadSubが機能しなくなっていることがわかりました。再読み込みできませんでしsubcontentた。

button.loadSubjsファイルのソースを一度だけ宣言し、クリックするたびに作業を行う他の方法はありますか? 誰でも問題を説明して、それを修正するためのヒントを教えてください。

4

3 に答える 3

2

ダイナミックHTMLをページに読み込んでいます。これは、呼び出した時点$('button.hide').click()でbutton.hide要素がページにまだ存在していなかったため、clickハンドラーをアタッチできなかったことを意味します。

delegate代わりに添付ファイルを試してみることをお勧めします。

$('#sub').on('click', 'button.hide', function () {
    $('#sub').fadeOut('slow');
});
于 2012-05-17T13:31:08.427 に答える
1

イベントをバインドしようとすると、非表示ボタンがページに表示されないため、イベントが登録されることはありません。

このように使用するように変更しますon（バージョン1.7以降を想定）

$(document).on('click', 'button.hide', function(){
    $('#sub').fadeOut('slow');
});

または、古いバージョンの場合は委任します。

$(document).delegate('button.hide', 'click', function(){
    $('#sub').fadeOut('slow');
});

これにより、イベントハンドラーがドキュメントレベルでアタッチされるため、ページに追加された新しいコンテンツに対して機能します。

于 2012-05-17T13:31:41.823 に答える
1

最初のページに、これを入れます。私の JQQuery コードを action.js ファイルに挿入できます。2 番目のページ (div にロードするページ) に、追加した 2 番目の Jquery コードを配置します。

最初のページ:

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<style>
#content{float:left;}
#sub{float:right;}
</style>

<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('.loadSub').click(function(){
$('#sub').show();
$('#sub').load('test.html');
});
});
});
</script>

</head>

<body>

<h2>Test de</h2>

<div id="content">
Content
<button class="loadSub">Load</button>
</div>

<div id="sub">Sub content</div>

</body>

</html>

2 番目のページ (div に読み込まれるページ) で、これを追加します。

<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('.hide').unbind("click").click(function(){
$('#sub').fadeOut('slow');
});
});
});
</script>

<h2>This is the sub content</h2>
<button class="hide">Hide</button>
于 2012-05-17T13:39:51.683 に答える