gpt4 book ai didi

javascript - 当 dom 从 ajax 更新时重新运行 Javascript

转载 作者:搜寻专家 更新时间:2023-11-01 05:22:58 24 4
gpt4 key购买 nike

我已经尝试了一段时间来解决我目前遇到的这个问题,直到现在都没有用。

我有一个带有菜单的主 html 文件,该菜单通过 ajax 将内容加载到 div。问题是加载的内容(女巫有一个“下一步”按钮可以转到...下一个动态加载页面)不起作用,所以我不得不对我在父页面上运行的功能添加一个调用.显然这并没有那么顺利,因为在点击了一些链接之后,我最终导致浏览器崩溃,因为对同一功能的请求超过 3000 次......

我怎样才能让函数重新运行,或者监听 DOM 的变化?而且 .on 不工作。

主文件上的脚本:

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();
});

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 -->
...

和动态页面:

<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>

如果我从“child.html”文件中删除脚本,当我按下下一步时没有任何反应。

最佳答案

代替

$('.dinMenu').on('click', 'a', function(event) {

将事件处理程序放在所有 <li> 上元素,将处理程序放在 <body> 上:

$('body').on('click', '.dinMenu a', function(event) {

这样,即使重新加载菜单,事件处理程序也将保持有效。换句话说,在 ajax 重新加载后不需要再次设置它。

关于javascript - 当 dom 从 ajax 更新时重新运行 Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24658487/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com