将生成的 Javascript 事件添加到生成的 HTML 中
Add generated Javascript Events to generated HTML
我做了一堆研究,但似乎我找不到我问题的好答案。
我这里有这段代码:
while($row = mysqli_fetch_row($query)){
$result .= '
<script>
function Click'.$DOMid.'01(){answer("'.$DOMid.'","'.$row[2].'", "accept");}
function Click'.$DOMid.'02(){answer("'.$DOMid.'","'.$row[2].'", "decline");}
</script>
<div id = "'.$DOMid.'" style = "box-shadow: 5px 5px 2px #0f0f0a; margin: 10px; width:300px; padding:10px; border: 1px solid #0f0f0a;">
<p>
Freundschaftsanfrage von: '.$row[2].'
</p>
<button id = "'.$DOMid.'01" onclick="Click'.$DOMid.'01">Accept</button>
<button id = "'.$DOMid.'02" onclick="Click'.$DOMid.'02">Decline</button>
</div>
';
$DOMid = $DOMid+1;
}
$result .= '<script>
function answer(id, user, type){
$.ajax({
method: "POST",
url: "systems/friends_system.php",
data:{type: type, user, <?php echo json_encode($log_username);?>}
}).done(function(r){
if(r.charAt(0) == "_"){
window.location = "message.php?msg=" + r;
}else{
_("id").style.display = "none";
}
});
}
</script>';
echo $result;
exit();
它的PHP代码,它为每个元素生成html和javascript。
但我认为我的 javascript 部分在这一点上没有被解析到浏览器抛出一个错误,即未定义 Clickxxx 函数。
生成的代码如下所示:
<script>
function Click001(){answer("0","Drop", "accept");}
function Click002(){answer("0","Drop", "decline");}
</script>
<div id="0" style="box-shadow: 5px 5px 2px #0f0f0a; margin: 10px; width:300px; padding:10px; border: 1px solid #0f0f0a;">
<p>
Freundschaftsanfrage von: Drop
</p>
<button id="001" onclick="Click001">Accept</button>
<button id="002" onclick="Click002">Decline</button>
</div>
<script>
function answer(id, user, type){
$.ajax({
method: "POST",
url: "systems/friends_system.php",
data:{type: type, user, <?php echo json_encode($log_username);?>}
}).done(function(r){
if(r.charAt(0) == "_"){
window.location = "message.php?msg=" + r;
}else{
_("id").style.display = "none";
}
});
}
</script>
Onclick是一个html事件,考虑到Click001是一个函数,所以用括号来调用它:
...button id="001" onclick="Click001()">...
你需要调用你的函数,这也是js的更好用法
while($row = mysqli_fetch_row($query)){
$result .= '
<script>
function Click(accept)
{
if(accept){
answer("'.$DOMid.'","'.$row[2].'", "accept");
}else{
answer("'.$DOMid.'","'.$row[2].'", "decline");
}
}
</script>
<div id = "'.$DOMid.'" style = "box-shadow: 5px 5px 2px #0f0f0a; margin: 10px; width:300px; padding:10px; border: 1px solid #0f0f0a;">
<p>
Freundschaftsanfrage von: '.$row[2].'
</p>
<button id = "'.$DOMid.'01" onclick="Click(true)">Accept</button>
<button id = "'.$DOMid.'02" onclick="Click(false)">Decline</button>
</div>
';
$DOMid = $DOMid+1;
}
$result .= '<script>
function answer(id, user, type){
$.ajax({
method: "POST",
url: "systems/friends_system.php",
data:{type: type, user, <?php echo json_encode($log_username);?>}
}).done(function(r){
if(r.charAt(0) == "_"){
window.location = "message.php?msg=" + r;
}else{
_("id").style.display = "none";
}
});
}
</script>';
echo $result;
我重新发明了代码
现在看起来像这样:
$result .= '
<div id = "'.$DOMid.'" style = "box-shadow: 5px 5px 2px #0f0f0a; margin: 10px; width:300px; height: 105px; padding:10px; border: 1px solid #0f0f0a;">
<p style = "height: 75px;">
<span style = "line-height: 75px; margin: auto 2px;">
Freundschaftsanfrage von: <a href = "/user.php?u='.$row[2].'">'.$row[2].'</a>
</span>
<span style = "line-height: 75px; margin: auto 2px;">
<img src = "/user/'.$row[2].'/profile_pic.png" height = 60px width = 50px alt= "'.$row[2].'">
</span>
</p>
<button id = "'.$DOMid.'01" onclick="answerswer('.$DOMid.', '''.$row[2].''', ''accept'')">Accept</button>
<button id = "'.$DOMid.'02" onclick="answerswer('.$DOMid.', '''.$row[2].''', ''decline'')">Decline</button>
</div>';
每个 JavaScript 现在都在原始文件中,并且只接受参数。
不需要通用的Javascript。
相关文章:
- 来自文本输入null的html javascript变量
- Html/Javascript-如何屏蔽除英国以外的所有欧盟国家,并允许所有非欧盟国家
- html+javascript:如何在某些条件下禁用dropdownlist中的null选项
- 在HTML/JavaScript中,有没有一种方法可以在图像开始加载时知道图像的最终布局尺寸
- HTML/Javascript表单会自动重置
- html/javascript中的可拖动文本
- 在HTML/JavaScript中减去两个数字
- 基本的HTML Javascript程序.这是怎么回事
- 一个html/javascript'小工具'知道用户何时单击了小部件外的任意位置
- HTML/JavaScript拖动&Drop-是否可以使重影图像*NOT*看起来'冲洗掉'
- 在HTML/Javascript文件中获取App Inventor 2变量值
- HTML/JavaScript表格标题
- 如何修复在浏览器中打开后出现在屏幕上的html/Javascript代码
- 在HTML JavaScript头部分运行Google脚本函数
- 如何在 html/javaScript/Jquery 中“浏览文件夹”
- 带有消息html/javascript的进度条
- 在html/javascript中请求撤消/重做事件
- 使用HTML/Javascript表单使用ActiveXObject创建带有嵌入图像的outlook电子邮件
- 使用html/javascript启动小部件
- 移动html/javascript编程中的变量传递