当dom从ajax更新时重新运行Javascript
[英]rerun Javascript when dom updates from ajax
问题描述
I've been trying for a while to solve this problem I'm currently having, to no use untill now. 
我已经尝试了一段时间来解决我现在所遇到的这个问题，直到现在还没有用。
I have a main html file with a menu that loads content to a div trough ajax. 我有一个主html文件，其中包含一个菜单，通过ajax将内容加载到div。 The problem is that the loaded content (witch has a 'next' button to go to the...next dynamic loaded page) doesn't work, so I had to add a recall to the function I'm running on the parent page. 问题是加载的内容（巫婆有一个'下一个'按钮去...下一个动态加载页面）不起作用，所以我不得不重新调用我在父页面上运行的函数。 Obviously this didn't went so well, because after clicking trough some of the links, I end up crashing the browser with more than 3000 request to the same function... 显然这并没有那么顺利，因为点击了一些链接之后，我最终崩溃了超过3000个请求到相同功能的浏览器...
How can I make it so the function re-runs, or listens to DOM changes? 我怎样才能使函数重新运行，或者监听DOM更改？ And .on isn't working. 而.on没有用。
Script on the main file: 主文件上的脚本：
var din = function () {
$('.dinMenu').on('click', 'a', function(event) {
event.preventDefault();
$('#dinContent').html('loading...');
var $this = $(this);
var module = $this.data("module");
var folder = 'modules/module_' + module + '/';
var href = $this.data("href");
var url = folder + href;
console.log(url);
$.ajax({
url: url,
type: 'GET',
dataType: 'html',
cache: false
}).done(function(data) {
$('#dinContent').html(data);
}).fail(function(jqXHR, textStatus, errorThrown) {
$('#dinContent').html("Error!! File is not loaded");
});
});
$(document).ready(function() {
din();
});
The HTML: HTML：
...
<li class="dinMenu"><a href="#" data-href="child.html" data-module="1">link</a></li>
...
<section class="panel content" id="dinContent" >
<!-- start panel specific content -->
...
and the dynamic pages: 和动态页面：
<footer class="subnav clearfix dinMenu">
<a class="button next right" href="#" data-href="child.html" data-module="1">Next</a>
</footer>
<!-- end panel specific content -->
<script>
din();
</script>
If I remove the script from the "child.html" file, nothing happens when I press next. 如果我从“child.html”文件中删除脚本，当我按下下一步时没有任何反应。
2 个解决方案
解决方案1
7 已采纳 2014-07-09 16:01:34
Instead of 代替
$('.dinMenu').on('click', 'a', function(event) {
which puts the event handlers on all the <li> elements, put the handler on the <body> : 将事件处理程序放在所有<li>元素上，将处理程序放在<body> ：
$('body').on('click', '.dinMenu a', function(event) {
That way the event handler will remain in effect even when the menu is reloaded. 这样，即使重新加载菜单，事件处理程序仍将保持有效。 There's no need to set it up again after an ajax reload, in other words. 换句话说，在ajax重新加载后无需再次设置它。
解决方案2
0 2014-07-09 16:11:38
I would suggest to put the entire function on document.ready 我建议把整个函数放在document.ready上
$(document).ready(function(){
$('.dinMenu').on('click', 'a', function(event) {
event.preventDefault();
$('#dinContent').html('loading...');
var $this = $(this);
var module = $this.data("module");
var folder = 'modules/module_' + module + '/';
var href = $this.data("href");
var url = folder + href;
console.log(url);
$.ajax({
url: url,
type: 'GET',
dataType: 'html',
cache: false
}).done(function(data) {
$('#dinContent').html(data);
}).fail(function(jqXHR, textStatus, errorThrown) {
$('#dinContent').html("Error!! File is not loaded");
});
});
})
So you don't have to call it into the <script> tag in the footer 因此，您不必将其调用到页脚中的<script>标记
Hope this helps 希望这可以帮助
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.