功能仅一次

Question

我在jQuery的新的，这里是我的问题：

我有一个触发动画（旋转木马），并执行以下功能：前

• 插入一个div默认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);