He estado jugando con JS y ajax en mi proyecto PHP y tengo algunos problemas. El ajax solo parece funcionar cuando la página se actualiza después de hacer clic o simplemente se actualiza para hacer clic. Estoy usando jquery 3.2.1.
Primero estaba usando .live() pero ahora está obsoleto y leí que .on() es una alternativa, así que lo estoy usando ahora.
Esta es mi parte JS:
$(".up_vote").on("click", function() { var post_id = $(this).attr('postid'); $.ajax({ type: "POST", data: { 'post_id': post_id, 'action': 'upvote' }, url: '<?php echo $url; ?>/includes/functions.php', dataType: 'json', success: function(response) { if (response.ResponseCode == 200) { $('#postbox_' + post_id).load('<?php echo $url; ?>/index.php #postbox_' + post_id + ' >*'); } else { alert(response.Message); } } }); }); $(".down_vote").on("click", function() { var post_id = $(this).attr('postid'); $.ajax({ type: "POST", data: { 'post_id': post_id, 'action': 'downvote' }, url: '<?php echo $url; ?>/includes/functions.php', dataType: 'json', success: function(response) { if (response.ResponseCode == 200) { $('#postbox_' + post_id).load('<?php echo $url; ?>/index.php #postbox_' + post_id + ' >*'); } else { alert(response.Message); } } }); }); $("#btnpost").click(function() { var post = $("#post_feed").val(); if (post == "") { alert("This can't be empty."); return false; } else { $.ajax({ type: "POST", data: { 'post_feed': post, 'action': 'post' }, url: '<?php echo $url; ?>/includes/functions.php', dataType: 'json', success: function(response) { if (response.ResponseCode == 200) { $("#post_feed").val(""); $('#feed_div').load('<?php echo $url; ?>/index.php #feed_div'); } else { alert(response.Message); } } }); } }); });¿Hay algo que me falta o que hice mal?
Hola, creo que te falta return false o e.preventDefault();
falso retorno; hacer que el navegador cancele el formulario de publicación en el servidor.
agregue return false o e.preventDefault() después de la función ajax;
ejemplo
$("#btnpost").click(function(e) { ///e here var post = $("#post_feed").val(); if (post == "") { alert("This can't be empty."); return false; } else { $.ajax({ type: "POST", data: { 'post_feed': post, 'action': 'post' }, url: '<?php echo $url; ?>/includes/functions.php', dataType: 'json', success: function(response) { if (response.ResponseCode == 200) { $("#post_feed").val(""); $('#feed_div').load('<?php echo $url; ?>/index.php #feed_div'); } else { alert(response.Message); } } }); } e.preventDefault(); //Here /// or return false; /// Here });Primero asegúrese de estar dando en el blanco, intente esto y vea si la alerta muestra:
$(function() { $(document).on('click', '.up_vote', function() { alert('ok'); }); });El evento de clic se adjunta a los elementos existentes en la carga de la página. La palabra clave aquí es “existente” . Cuando cargamos algo con ajax manipulamos DOM. Estamos colocando elemento totalmente nuevo. Entonces, lo que debemos hacer es adjuntar ese evento después de colocar contenido nuevo.
entonces, para adjuntar un evento cada vez que se llama ajax, usamos .on
edite su código en consecuencia
$(document).on('click', '.up_vote', function() { var post_id = $(this).attr('postid'); $.ajax({ type: "POST", data: { 'post_id': post_id, 'action': 'upvote' }, url: '<?php echo $url; ?>/includes/functions.php', dataType: 'json', success: function(response) { if (response.ResponseCode == 200) { $('#postbox_' + post_id).load('<?php echo $url; ?>/index.php #postbox_' + post_id + ' >*'); } else { alert(response.Message); } } }); }); $(document).on('click', '.down_vote', function() { var post_id = $(this).attr('postid'); $.ajax({ type: "POST", data: { 'post_id': post_id, 'action': 'downvote' }, url: '<?php echo $url; ?>/includes/functions.php', dataType: 'json', success: function(response) { if (response.ResponseCode == 200) { $('#postbox_' + post_id).load('<?php echo $url; ?>/index.php #postbox_' + post_id + ' >*'); } else { alert(response.Message); } } }); }); $(document).on('click', '#btnpost', function() { var post = $("#post_feed").val(); if (post == "") { alert("This can't be empty."); return false; } else { $.ajax({ type: "POST", data: { 'post_feed': post, 'action': 'post' }, url: '<?php echo $url; ?>/includes/functions.php', dataType: 'json', success: function(response) { if (response.ResponseCode == 200) { $("#post_feed").val(""); $('#feed_div').load('<?php echo $url; ?>/index.php #feed_div'); } else { alert(response.Message); } } }); } }); });Puedes probar con el código dado a continuación.
$(document).on("click",".up_vote",function() { alert("click"); });