Peter Atanasov Peter Atanasov - 1 month ago 9
Javascript Question

My onclick successfully makes an ajax call but for some reason doesn't executes the alert(1);

So my ajax call successfully executes and updates my database, however, anything else I include does not work. This alert(1); does not alert anything. Any on click event handle inside doesn't work either and I'm not sure why.

html

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'><img class='arrowUp' src='../images/Social Media/arrowUp.png' alt='submit'></button>";
echo "</form>";


Javascript

$('.arrowUp').onclick(function(e){
e.preventDefault();
alert(1);
var form = $(this);

var id = form.find("input[name='id']");
var userId = form.find("input[name='userId']");
var action = form.find("input[name='action']");
var ratingNumber = form.parent('.upvoteDownvoteRatingContainer').find('.ratingNumber');

$.post('../includes/voting.inc.php', {id: id.val(), userId: userId.val(), action: action.val()}, function(data){
ratingNumber.html((data));
}, 'json');
});

Answer Source

In jQuery, the .onclick() function does not exist. You can either do this:

$('.arrowUp').on('click', function(){ /* ... */ });

or this:

$('.arrowUp').click(function(){ /* ... */ });