javascript - 在加载的 ajax 内容上绑定点击事件
问题描述
我正在尝试通过 ajax 加载内容,然后对这些内容执行一些点击事件。
所以基本上我想先加载内容(在这种情况下是按钮),然后在它们上应用一些点击事件。
因此我使用回调的目的是首先加载内容然后应用点击事件,但是这里我有一个问题是在回调函数之后加载内容,我不想要这个,我想加载内容先执行回调函数,这个问题怎么解决?
到目前为止,为了实现这一点,我有以下代码。
我有以下代码food.php
:
<button onclick="findWeek(fun)">week</button> // fun is callback function passed to findWeek()
// findWeek
功能 ------ AJAX 请求加载按钮 ------:
function findWeek(fun)
{
var xhr = new XMLHttpRequest();
xhr.open("GET" ,"start.php",true);
xhr.send(null);
xhr.onreadystatechange = function(){
if( (xhr.readyState == '4') && ( xhr.status == '200') ){
document.getElementById("stats").innerHTML = xhr.responseText;
}
};
fun();
}
// fun
函数,是一个回调函数,我假设这将在findWeek()
函数加载内容时起作用,这意味着它将从页面加载所需的按钮,start.php
将这些按钮插入到内部的以下 div 中food.php
。
<div id = 'stats'>
</div>
之后,我希望能够单击那些应该在上面的加载按钮div
。
这就是为什么我的fun()
功能类似于以下。
注意:我已经.dayBtns
为加载的按钮定义了类。
function fun(){
function myfunction(){
alert('just clicked the button');
}
var dayBtns = document.getElementsByClassName('dayBtns');
alert('contents should be loaded');
for(var i = 0; i < dayBtns.length; i++){
console.log(dayBtns[i]);
btns[i].addEventListener('click', myfunction);
}
}
问题是fun()
函数执行后正在加载内容,如何限制fun()
函数在没有加载数据之前不执行?
请帮忙,谢谢!
解决方案
像fun()
这样放入 onreadystatechange -
function findWeek(fun) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "start.php", true);
xhr.send(null);
xhr.onreadystatechange = function() {
if ((xhr.readyState == '4') && (xhr.status == '200')) {
document.getElementById("stats").innerHTML = xhr.responseText;
fun();
}
};
}
innerHTML 是在函数 fun 被调用之后设置的,因此此时 DOM 中没有任何元素。
您在此处的代码中也有错字:
for(var i = 0; i < dayBtns.length; i++){
console.log(dayBtns[i]);
btns[i].addEventListener('click', myfunction);
}
应该:
for(var i = 0; i < dayBtns.length; i++){
console.log(dayBtns[i]);
dayBtns[i].addEventListener('click', myfunction);
}
注意dayBtns vs btns
推荐阅读
- android - 如何使用 react-native-fs 列出 sdcard/外部存储的所有文件/文件夹
- python - 在 python-3.4+ 中实现导入后挂钩的正确方法
- javascript - 调用 NextJs Route 并将数据传递给组件
- python - 有效地迭代嵌套列表以找到总和
- javascript - 自动滚动到页面底部不起作用 [javascript]
- java - 为什么这个命令不起作用?对值进行排序
- python - 从本地项目目录中的任何位置导入
- python - 在多个标签上调节 StyleGAN2
- data-modeling - 如何在没有强关系键(外键)的情况下在数据库中创建 LINK?
- python - 如果找到则循环并打印结果,否则再次循环:如何在 Python 中摆脱多重嵌套 if