Question

我有一个页面用ajax加载不同的页面。但是另一个使用一些脚本来转换灰度图像效果。 grayscale image hover 问题是当它试图加载时没有显示效果例如：

在我的主页中：

$(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

我不熟悉这个类，但听起来像是在加载页面后加载了gray.js的scrips，但是在通过ajax加载图像之前。

Answer 3

我对加载AJAX并不太熟悉[不熟悉]，但我有一些理论。

是不是在加载了family.html的页面上没有加载gray.js？或者，如果jQuery被多次调用（在页面上加载family.html一次，也在family.html中调用一次）可能会导致一些问题。

在div中加载内容而不显示样式和脚本

3 个答案: