Question

我是jQuery的新手，这是我的问题：

我有一个触发动画（轮播）的功能并执行以下操作：

在默认div（class =“template”）之前插入一个div 期望的内容
动画两个div并带来新的div inview
删除旧div及其内容

该功能仅适用于第一次。我怀疑jquery无法识别剩余的div，即使它与旧的div具有相同的类。我如何告诉jQuery获取新的div并执行相同的任务？

该函数在一个页面中工作，该页面通过ajax在id =“ajax_content”的div中加载

这是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);

功能只能工作一次

1 个答案: