似乎无法弄清楚为什么使用 jquery 单击按钮后我没有收到警报

Question

长话短说，到目前为止，我只在我的网站上使用html，css和php。我添加了能够对图像投赞成票和反对票的功能，但是，因为我不希望每次投赞成票或反对票时页面都刷新，所以我做了一个快速搜索，发现我必须使用 jquery。在页脚中包含我的jquery和javascript文件后，我决定编写一段简单的代码，看看当我点击点赞按钮时是否会收到警报。这是代码

$('.arrowUp').click(function(){
alert('hello');
});

不幸的是，当我单击点赞按钮时，由于某种原因没有弹出警报，所以我只能假设我在该函数中编写的任何代码，在我弄清楚为什么警报没有弹出之前，它都不会起作用。

这是我的点赞按钮代码。

if ($hasVoted < 1) {
echo    "<div class='upvoteDownvoteRatingContainer'><form class='upvoteImage' method='POST' action=''>
<input type='hidden' name='action' value='upvote'>
<input type='hidden' name='id' value='".$row['id']."'>
<input type='hidden' name='userId' value='".$currentUser."'>
<button class='upvoteImageButton' type='submit' name='upvoteImage'><img class='arrowUp' src='../images/Social Media/arrowUp.png' alt='submit'></button>
</form>";
</div>
}

Answer 1

如果正确包含jQuery，我认为问题在于<img>，它位于表单内部的type="submit"<button>中。当然，当您单击提交按钮时，它会尝试提交表单。

$('.arrowUp').click(function() {
alert('test');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class='upvoteDownvoteRatingContainer'>
<form class='upvoteImage' method='POST' action=''>
<input type='hidden' name='action' value='upvote'>
<input type='hidden' name='id' value=''>
<input type='hidden' name='userId' value='currentUser'>
<button class='upvoteImageButton' type='submit' name='upvoteImage'><img class='arrowUp' src='../images/Social Media/arrowUp.png' alt='submit'></button>
</form>
</div>

如上例所示，警报不会发生。现在，除了按钮外的<img>之外，使用完全相同的代码，

$('.arrowUp').click(function() {
alert('test');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class='upvoteDownvoteRatingContainer'>
<form class='upvoteImage' method='POST' action=''>
<input type='hidden' name='action' value='upvote'>
<input type='hidden' name='id' value=''>
<input type='hidden' name='userId' value='currentUser'>
<img class='arrowUp' src='../images/Social Media/arrowUp.png' alt='submit'>
<button class='upvoteImageButton' type='submit' name='upvoteImage'></button>
</form>
</div>

编辑：

OP似乎有一个脚本错误导致了错误，现在已经修复了。

Answer 2

把你的代码放在$(document).ready(function(){});里面。

将 arrowUp 类放入按钮中。

<button class='upvoteImageButton arrowUp' type='submit' name='upvoteImage'>
<img src='../images/Social Media/arrowUp.png' alt='submit'>
</button>

或 将图像放在按钮旁边，而不是放在按钮旁边。

当然，包装你的js代码，就像：

$(document).ready(function(){
$('.arrowUp').click(function(){
alert('hello');
});
});

Answer 3

将arrowUp类添加到<button>而不是<ima>

<div class='upvoteDownvoteRatingContainer'><form class='upvoteImage' method='POST' action=''>
<input type='hidden' name='action' value='upvote'>
<input type='hidden' name='id' value='".$row['id']."'>
<input type='hidden' name='userId' value='".$currentUser."'>
<button class='upvoteImageButton arrowUp' type='submit' name='upvoteImage'>
<img src='../images/Social Media/arrowUp.png' alt='submit'></button>
</form>";
</div>

Answer 4

在Jquery选择器中选择.upvoteImageButton而不是.arrowUp，顺便说一下，你确定你在加载文档后加载jquery。