在div中加載內容，但不顯示樣式和腳本

Question

我有一個頁面可以用ajax加載不同的頁面。 但是另一個使用一些腳本來轉換灰度圖像效果。 灰度圖像懸停的問題是當它嘗試加載時未顯示效果，例如：

在我的主頁上：

$(function(){
$("#family").click(function () {
    $("#proyects").load('family.html');
});
});

將內容放在這里

<div class="ten columns content" id="proyects">

</div>

另一頁加載灰度效果，單獨可以正常工作，但是當用ajax加載時不顯示效果

<script src="js/jquery.min.js" type="text/javascript"></script> 
<script src="js/gray.js" type="text/javascript"></script>

    <section id="content">
        <article class="item">
        <a href="#"><img src="images/proyecto1.jpg" height="223" width="327"></a>
         </article>
             </section>

Answer 1

根據您的代碼示例，頁面加載時沒有#family標記，因此進行click()調用不會綁定任何內容。 如果在頁面加載后填充#family ，則應使用on('click')調用，該調用在將DOM元素實際加載到頁面上時進行正確的事件綁定。 我還建議使用jQuery.ajax方法來支持load()來正確處理AJAX請求。

換一種說法...

$(function(){
    $(document).on('click', '#family', function (event) {
        $.ajax({
            url: '/path/to/family.html'
          , dataType: 'html'
        }).done(function (data) {
            $('#proyects').append(data);
        }); 
    });
});

Answer 2

我不熟悉此類，但是聽起來好像在加載頁面之后但在通過ajax加載圖像之前，正在加載gray.js腳本。

Answer 3

我對加載AJAX不太熟悉（一點也不熟悉），但是我有一些理論。

可能是沒在加載family.html的頁面上加載gray.js嗎？ 或者，如果jQuery被多次調用（在加載family.html的頁面上調用一次，並且在family.html中的調用一次），則可能導致某些問題。