同じページの別のページからロードされたdivを変更する

Question

私はすべてのコンテンツを保持して読み込むindex.phpページを持っているので、他のページに読み込む必要はありません。

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

と私はdivを/ページのほとんどを保持しているフルcontent.phpファイルがあります：とても良い、これまで

<div id="cont1">something : 
    <div id="innercont1"><a href="#">Dynamic click</a> 
    </div> 
</div> 
<div id="changeinnercont1"> 
    <img src="images/pic.jpg" /> 
</div> 

をしかし、だから私はindex.phpの中にdiv要素を持って言うことができますjQuery \ Ajaxスクリプトはindex.phpで動作していないので、content.phpからdivを操作する必要があります。これは、onclickのイベントにはindex.phpとその完璧に働いてから#contentでdivをロードするスクリプトです：

$("#content").fadeOut("slow",function(){ 
    $("#content").load("content.php #cont1"); 
    $("#content").fadeIn(); 
}); 

しかし、それはcontent.phpからこのコンテンツをロードしているため、何も起こりませんリンクテキストを私をクリックすると、

$(function() { 
    $("#innercont1").click(function (e) { 
    e.preventDefault(); 
     $("#innercont1").load("content.php #changeinnercont1"); 
    }); 
}); 

私はブラウザありえないが、別のページからロードされたdiv要素が、自身のからのみ#content（index.phpを）を保持すると思います

Answer 1

("#innercont1").clickイベントリスナが登録されると、その要素は、動的に他の場所からロードされているので、IDのinnercont1とDOMには要素が存在しません。このインスタンスに必要なものは、いつでもそのIDを持つ要素をキャッチするイベントリスナーです。代わりにbody要素にリスナーをバインドすることができます。

$(document.body).on('click', '#innercont1', function(){ 
    //code 
}); 

Answer 2

それ：正しく作動しイマイチのindex.php内の別のスクリプトのクリックイベントリスナーがバインドされている可能性があります前#innercont1が存在します。リスナーをすべて1つのブロックにロードしてバインドするとどうなりますか？

$("#content").fadeOut("slow",function(){ 
    $("#content").load("content.php #cont1"); 
    $("#innercont1").click(function (e) { 
    e.preventDefault(); 
    $("#innercont1").load("content.php #changeinnercont1"); 
    }); 
    $("#content").fadeIn(); 
});