[英]Javascript/Jquery onClick using HTML Div not working
当我单击“php1”div 时,它什么也不做。
location.reload() 是一个占位符,只是一种了解 onClick 是否有效的简单方法。
<div class="php-task">
<h1>PHP</h1>
<div id="php1" class="text">
<p>Display/setvars</p>
</div>
</div>
$("#php1").click(function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "php/pagehandler.php",
data: {page: "task",task: 1},
success: function (response) {
location.reload();
}
});
});
你可以试试下面的代码吗? 可能是您的 HTML 在页面加载后动态加载。
$(function(){
$('body').on('click', '#php1', function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: "php/pagehandler.php",
data: {page: "task",task: 1},
success: function (response) {
location.reload();
}
});
});
});
只是为了向您展示它不适用于重复的 id 元素(并且它确实可以作为具有该id
的第一个 div 的简化示例,该id
必须是唯一的):
$("#php1").click(function (e) { console.log('clicked'); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="php-task"> <h1>PHP</h1> <div id="php1" class="text"><!-- clicking this will trigger the handler --> <p>Display/setvars</p> <p>clicking this will trigger the handler</p> </div> </div> <div class="php-task"> <h1>PHP</h1> <div id="php1" class="text"><!-- clicking this will NOT trigger the handler --> <p>Display/setvars</p> <p>clicking this will NOT trigger the handler</p> </div> </div>
我认为在你有多个 div php1,php2,php3...
最好使用类来附加点击事件:
$(function() { $(".php-task .text").click(function(e) { e.preventDefault(); console.log('Task with id : ' + this.id + ' clicked.'); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="php-task"> <h1>PHP</h1> <div id="php1" class="text"> <p>Display/setvars</p> </div> </div> <div class="php-task"> <h1>PHP</h1> <div id="php2" class="text"> <p>Display/setvars</p> </div> </div> <div class="php-task"> <h1>PHP</h1> <div id="php3" class="text"> <p>Display/setvars</p> </div> </div><br><br><br>
$(document).ready(function () {
$("#task").click(function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "php/pagehandler.php",
data: {
page: "task"
},
success: function (response) {
location.reload();
}
});
});
});
添加以下内容即可解决问题:
$(document).ready(function()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.