Функция работает только один раз

Question

Я новичок в jQuery, и вот моя проблема:

У меня есть функция, которая запускает анимацию (карусель) и выполняет следующее:

• Вставляет div перед div по умолчанию (class = "template") с помощью желаемый контент
• Анимирует два div и вводит новый обзор div
• Удаляет старый div и его содержимое

Функция работает только в первый раз. Я подозреваю, что jquery не распознает оставшийся div, даже если он имеет тот же класс, что и старый div. Как я могу сказать jQuery взять новый div и выполнить ту же задачу?

Функция работает на странице, которая загружается через ajax в div с id = "ajax_content"

Вот 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>

Вот скрипт:

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

Вы должны делегировать обработку события другому элементу

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