如何在html更改后调用jquery函数

我想弄清楚为什么我的函数在更改html代码后停止工作。如何在html更改后调用jquery函数

我有一个div：

<div class="float"> 
<div class="box" data-speed="3" data-direction="X"><h1>Hola</h1></div> 
<div class="box" data-speed="2" data-direction="X"><h1>chau</h1></div> 
</div>

而jQuery代码：

$(function() { 
    $('.box').moveIt(); 
});  
//move elements in different speeds 
$.fn.moveIt = function() { 
    var win = $(window); 
    var it = $(this); 
    var instances = []; 

    $(this).each(function(){ 
     instances.push(new moveItItem($(this))); 
    }); 

    $('.parallax').on('scroll', function() { 
     instances.forEach(function(inst){ 
      var wrap = inst.el.parents('.float'); 
      var scrol = win.scrollTop()-wrap.offset().top; 
      inst.update(scrol); 
     }); 
    }); 

} 

var moveItItem = function(el){ 
    this.el = $(el); 
    this.speed = parseInt(this.el.attr('data-scroll-speed')); 
    this.direction = this.el.attr('data-direction'); 
}; 

moveItItem.prototype.update = function(scrollTop){ 
    var pos = scrollTop/this.speed; 
    this.el.css('transform', 'translate'+this.direction+'(' + -pos + 'px)'); 
};

确定，直到这里的一切工作，当我滚动元件.box相应的翻译。

但现在我想修改.float类的HTML Ajax调用后

//after ajax 
$.ajax({ 
    url: 'do_content.php' 
}).done(function(result) { 
    //result = <div class="box" data-speed="3" data-direction="X"><h1>Como estas?</h1></div> 
    $('.float').html(result); 
});

当我解雇再次滚动功能后出现看坏了，我得到这个消息：

Uncaught TypeError: Cannot read property 'top' of undefined 
    at http://localhost/ophelia/public/js/control.js?v=1487219951:197:45 
    at Array.forEach (native) 
    at HTMLDivElement.<anonymous> (http://localhost/ophelia/public/js/control.js?v=1487219951:195:13) 
    at HTMLDivElement.dispatch (http://localhost/ophelia/public/utilities/jquery/jquery-3.1.1.min.js:3:10315) 
    at HTMLDivElement.q.handle (http://localhost/ophelia/public/utilities/jquery/jquery-3.1.1.min.js:3:8342)

据我所知，只有当我改变类.box（我试图改变唯一的h1，它并没有中断，但我想改变一切以改变速度）的元素，才会出现此消息

如何重新启动该功能？

我试图用$('.box').moveIt();再次调用它，但仍得到相同的错误

我知道是一个长期的问题，但没有找到另一种方式来解释我的问题

来源

2017-02-16 Tomas Lucena

你能后的代码为您的AJAX功能为好，好吗？ – thesublimeobject

编辑我的朋友 –

当您尝试重新调用该函数时，是否将该调用放在'done（）'方法内部，还是在整个ajax方法之后？ – thesublimeobject

正如已经指出的（但也许不是那么清除），问题在于你在一定时间内使用页面中存在的元素来附加事件处理程序（我想到instances var）。然后你替换它们，但是你的处理程序已经设置为滚动元素的class .parallax，并且已经使用instances等实例进行了注册。

一种方法是使用委托方法重写您的代码。

从http://api.jquery.com/on/

的事件处理程序仅结合到当前选择的元素;他们必须在您的代码调用.on（）时存在。

委托事件有优势，他们可以处理来自后代元素被添加到该文件在稍后的时间

事件的委派方法附加一个事件处理程序只有一个元素，在TBODY事件，和事件只需要泡了一个级别（从点击TR要TBODY）：

$("#dataTable tbody").on("click", "tr", function() { 

    console.log($(this).text()); 

});

但它可能是复杂的，你必须深入调整你的代码。

否则，你可以重写你的函数如下（抱歉，我不能让小提琴）

$(function() { 
    $('.parallax').moveIt(); 
}); 

//move elements in different speeds 
$.fn.moveIt = function() { 
    var win = $(window); 
    var it = $(this); 
//REMOVED 
//var instances = []; 


// $(this).each(function(){ 
//  instances.push(new moveItItem($(this))); 
// }); 

    $(this).on('scroll', function() { 
     $('.box').each(function(){ 
      var inst=new moveItItem($(this)); 
      var wrap = inst.el.parents('.float'); 
      var scrol = win.scrollTop()-wrap.offset().top; 
      inst.update(scrol); 
     }); 
    }); 

} 

...... and so on

来源

2017-02-16 06:06:24 Massimo

感谢队友，正在工作！ –

这是因为html元素绑听众已被替换.. 像这样fiddle这里..警报的作品，但HTML后改变，它不。这是因为旧元素已被新元素所取代。

可以使用on功能的jQuery让过去这就像这个fiddle

来源

2017-02-16 05:10:49

，你可以在div.float绑定的事件和经历element.children移动每.box

来源

2017-02-16 05:27:15 troy

是真的！只是要标记其他问题，因为有示例:)谢谢 –

如何在html更改后调用jquery函数

回答

相关问题