Question

I have a page that load different pages with ajax. but the other use some script to convert grayscale image effect. grayscale image hover
the problems is when it try to load doesnt show the effect
for example:

in my main page:

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

put the content here

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

</div>

the other page load the grayscale effect, works fine alone but when it loads with ajax doesn’t show the effect

<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

According to your code sample, there is no #family tag when the page is loaded, so making a click() call will not bind to anything. If #family is populated after the page loads, you should use an on('click') call which does proper event binding when the DOM element is actually loaded onto the page. I would also recommend using the jQuery.ajax method in favor of load() to properly handle AJAX requests.

In other words…

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