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

Question

Long story short, up until now I have only been using html, css and php for my website. I added the ability to be able to upvote and downvote images, however, since I don't want the page to refresh every time I upvote or downvote, I did a quick search and found out I'd have to use jquery. After including my jquery and javascript files in the footer, I decided to write a simple piece of code to see if I'll get an alert when I click the upvote button. Here's the code

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

Unfortunately, when I click the upvote button, the alert doesn't pop up for some reason so I can only assume that whatever code I write in that function, it's not gonna work until I figure out why is the alert not popping.

This is my upvote button code.

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

Providing that jQuery is properly included, I think the problem lies in the <img> which is in a type="submit" <button> , which is inside a form. Naturally, when you click the submit button it tries to submit the form.

 $('.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> 

As you can see in the example above, the alert doesn't happen. Now, with the exact same code except the <img> outside the 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'> <img class='arrowUp' src='../images/Social Media/arrowUp.png' alt='submit'> <button class='upvoteImageButton' type='submit' name='upvoteImage'></button> </form> </div> 

Edit:

It appears the OP had a script error which was causing the error, which has now been fixed.

Answer 2

add the arrowUp class to <button> instead of <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 3

Put your code in inside $(document).ready(function(){}); .

Put the arrowUp class in button.

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

Or Place the image alongside button not inside of it.

And of course wrap you js code like:

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

Answer 4

在Jquery选择器中选择.upvoteImageButton而不是.arrowUp ， .arrowUp ，您确定要在加载文档后加载jquery。