e. preventDefault() does not work

Asked

Viewed 41 times

2

I have the following code:

<script type="text/javascript">
  $.post( "pesquisar.php", { titulo: 'Luan' })
    .done(function( data ) {
        $(".result").empty().html(data);
      });


  $(".pedir").click(function(e) {
      e.preventDefault();
      alert("asdasdad");
  });
</script>

search.php:

<?php
// ini_set('html_errors', 'On');
// ini_set('display_errors', 1);
// ini_set('display_startup_errors', 1);
// error_reporting(E_ALL);

// if ($_SERVER["REQUEST_METHOD"] == "GET" && isset($_GET['musica']) && $_GET['musica'] != "") {
//  $musica = urldecode($_GET['musica']) . "\n";
//  file_put_contents($pedidos, $musica, FILE_APPEND);
//  $saida = "Obrigado, música " . basename($musica) . " pedida.";
// }

if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['titulo']) && $_POST['titulo'] != "") {
    $musicas = '/usr/local/musicas';
    $normalizeChars = array(
    'Š'=>'S', 'š'=>'s', 'Ð'=>'Dj','Ž'=>'Z', 'ž'=>'z', 'À'=>'A', 'Á'=>'A', 'Â'=>'A', 'Ã'=>'A', 'Ä'=>'A',
    'Å'=>'A', 'Æ'=>'A', 'Ç'=>'C', 'È'=>'E', 'É'=>'E', 'Ê'=>'E', 'Ë'=>'E', 'Ì'=>'I', 'Í'=>'I', 'Î'=>'I',
    'Ï'=>'I', 'Ñ'=>'N', 'Ń'=>'N', 'Ò'=>'O', 'Ó'=>'O', 'Ô'=>'O', 'Õ'=>'O', 'Ö'=>'O', 'Ø'=>'O', 'Ù'=>'U', 'Ú'=>'U',
    'Û'=>'U', 'Ü'=>'U', 'Ý'=>'Y', 'Þ'=>'B', 'ß'=>'Ss','à'=>'a', 'á'=>'a', 'â'=>'a', 'ã'=>'a', 'ä'=>'a',
    'å'=>'a', 'æ'=>'a', 'ç'=>'c', 'è'=>'e', 'é'=>'e', 'ê'=>'e', 'ë'=>'e', 'ì'=>'i', 'í'=>'i', 'î'=>'i',
    'ï'=>'i', 'ð'=>'o', 'ñ'=>'n', 'ń'=>'n', 'ò'=>'o', 'ó'=>'o', 'ô'=>'o', 'õ'=>'o', 'ö'=>'o', 'ø'=>'o', 'ù'=>'u',
    'ú'=>'u', 'û'=>'u', 'ü'=>'u', 'ý'=>'y', 'ý'=>'y', 'þ'=>'b', 'ÿ'=>'y', 'ƒ'=>'f',
    'ă'=>'a', 'î'=>'i', 'â'=>'a', 'ș'=>'s', 'ț'=>'t', 'Ă'=>'A', 'Î'=>'I', 'Â'=>'A', 'Ș'=>'S', 'Ț'=>'T',
  );
    $titulo = strtr($_POST['titulo'], $normalizeChars);
    $scan = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($musicas));
    $arquivos = array();
    $extensoes = array('mp3');

    try {
        foreach ($scan as $arquivo) {
            $arquivo2 = strtr($arquivo->getPathname(), $normalizeChars);
            if (!$arquivo->isDir() && $arquivo->isReadable() && in_array($arquivo->getExtension(), $extensoes) && strpos(strtolower($arquivo2), strtolower($titulo)) !== false) {
                $arquivos[] = basename ($arquivo->getPathname()) . " <a class='pedir' href='pedir.php?musica=" . urlencode($arquivo->getPathname()) . "'>Pedir</a>";
            }
        }

        foreach ($arquivos as &$valor) {
            $saida .= $valor . "<br />";
        }

    } catch (UnexpectedValueException $e) {
        $saida = "Erro ao listar diretórios.";
    }

    echo $saida;

}
?>

If I generate a list of links manually, e.preventDefault(); works as expected and when clicking a link the browser does not redirect.

But if I generate a list of links dynamically through the $.post method by clicking on these links I get sent to the URL.

What am I doing wrong? Is there a better way to do this?

  • 1

    Your problem is the same as in the Inkei question. In practice you should use $('.result').on('click', '.pedir', function(e) {

  • 1

    @Sergio thank you so much! It worked! I really searched and did not find the question you quoted. Just a doubt, how to proceed if the . ask to be out of the . result? Thanks again!

  • 1

    The idea is to use $(elPai).on( an element that is on the page when Javascript is read. Last time you can always use $(document).on(, but the closer to the element to be delegated the better.

  • Thank you very much, it helped so much! A hug.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.