Question

I am new in jQuery and here is my problem:

I have a function that triggers an animation (carousel) and performs the following:

• Inserts a div before the default div (class=”template”) with the
  desired content
• Animates the two divs and brings the new div inview
• Removes the old div and its contents

The function works only for the first time.
I suspect that jquery does not recognise the remaining div, even if it has the same class with the old div.
How can I tell jQuery to grab the new div and perform the same task?

The function works in a page that is loaded via ajax in a div with id=”ajax_content”

Here is the HTML:

<div id="prev" class="pers_arrow"></div>    <!-- Left Arrow -->

<div id="pers_content">

<div id="template_container" class="cur_temp">  <!-- Template Container (850px or 1700px width) -->



    <div class="template"> <!-- The div that holds the default content, after the function execution is removed and replased from the new div with the same class -->
        <div id="template_loading"></div>   <!-- Loading template icon -->
        <div id="pers_image">
            <img src="images/user.png" alt="" />
        </div>
        <div id="pers_details">
            <h1>Μερκούρης Καραγιάννης</h1>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            </p>            
        </div>
    </div>

</div>

Here is the script:

var ajax_content = $('#ajax_content');
var prev = $('#prev');
var pers_arrow = $('.pers_arrow');

var temp = function() {
    var ajax_content = $('#ajax_content');
    var prev = $('#prev');
    var template_loading = $('#template_loading');
    var template_container = $('#template_container');  
    var template = $('.template');
        var first_temp = template.filter(':first');
        var last_temp = template.filter(':last');

    var htmlEx = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in mattis elit. Aliquam egestas justo aliquet risus tempus porttitor. Vivamus vel ultricies dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in mattis elit. Aliquam egestas justo aliquet risus tempus porttitor. Vivamus vel ultricies dolor.";

    template_loading
        .fadeIn()
        .queue(function() {
            template_container.attr('class', 'cur_prev')        
            template.before('<div class="template">' + htmlEx + '</div>')
                .queue(function() {
                    template_container.animate({"margin-left" : "0"}, 400, 'easeOutExpo')
                        .queue(function() {
                            template_loading.fadeOut();
                            last_temp.remove();
                            template_container.attr('class', 'cur_temp');                                   
                            $(this).dequeue();
                        });
                    $(this).dequeue();
                });
            $(this).dequeue();
        });
};

ajax_content.on("click", prev, temp); 

Answer 1

You should delegate event handling to another element

 $(document).on("click",  prev, temp);