1

Tengo una funcion JavaScript dentro de un archivo JS

$(document).ready(function() {
  $.ajax({
    url: 'https://swapi.co/api/people/1/?format=json',
    type: 'GET',
    dataType: 'JSON',
    success: function(json) {
      //console.log(json.name);
      $("h2.name").text(json.name);
    }
  });
  $.ajax({
    url: 'https://swapi.co/api/people/?format=json',
    type: 'GET',
    dataType: 'JSON',
    success: function(per) {
      for (var i = 0; i < 6; i++) {
        var a = $("<div onclick='data2('ddddd')' class='col-md-4'>" + per.results[i].name + "</div>");
        $(".row").append(a);
        //console.log(per.results[i].name);
      }
    }
  });
});

function data2(nom) {
  console.log(nom);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul class="navbar navbar-dark bg-dark">
  <li class="nav-item">
    <a class="nav-link active" href="index.html">Accueil</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Start Wars</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Nous</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Contact</a>
  </li>
</ul>
<!--images banner-->
<div class="text-center">
  <img src="images/stw.jpg" class="img-fluid" alt="Responsive image">
</div>

<div class="alert alert-dark text-center" role="alert">
  <h2 class="name mb-0">Loading...</h2>
</div>

<div class="row">

</div>

</div>

Quiero que la función data2 se ejecute cada vez que se ejecute al hacer click en los div que se crean con jQuery. Pero al hacer click me marca este error:

Uncaught SyntaxError: Unexpected token }

en la línea de la función data2.

3
  • Sin hacer ningún cambio en tu código, lo he puesto como ejecutable y he añadido jQuery. Si le das al botón de "Ejecutar" verás que no falla nada. Esto se debe a que hay más en tu problema que sólo el JS, también deberías incluir el HTML relacionado para que podamos reproducir el problema.
    – Alvaro Montoro
    Commented el 14 oct. 2017 a las 18:39
  • ya lo agregué el HTML Commented el 14 oct. 2017 a las 18:44
  • Gracias. Lo he puesto como parte del ejecutable y ahora ya se puede ver el problema (he comentado los console.log para que no añadan ruido)
    – Alvaro Montoro
    Commented el 14 oct. 2017 a las 18:49

1 respuesta 1

1

El problema está en las comillas de esta línea:

var a = $("<div onclick='data2('ddddd')' class='col-md-4'>" + per.results[i].name + "</div>");

En concreto, en la parte del onclick. Si te fijas, el onclick se abre con comillas simples ' que también se usan para la cadena de texto que se pasa a data2. Una solución sería cambiar las comillas simples de apertura y cierre por unas comillas dobles escapadas \" y ya funcionaría:

$(document).ready(function() {
  $.ajax({
    url: 'https://swapi.co/api/people/1/?format=json',
    type: 'GET',
    dataType: 'JSON',
    success: function(json) {
      //console.log(json.name);
      $("h2.name").text(json.name);
    }
  });
  $.ajax({
    url: 'https://swapi.co/api/people/?format=json',
    type: 'GET',
    dataType: 'JSON',
    success: function(per) {
      for (var i = 0; i < 6; i++) {
        var a = $("<div onclick=\"data2('ddddd')\" class='col-md-4'>" + per.results[i].name + "</div>");
        $(".row").append(a);
        //console.log(per.results[i].name);
      }
    }
  });
});

function data2(nom) {
  console.log(nom);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul class="navbar navbar-dark bg-dark">
  <li class="nav-item">
    <a class="nav-link active" href="index.html">Accueil</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Start Wars</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Nous</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Contact</a>
  </li>
</ul>
<!--images banner-->
<div class="text-center">
  <img src="images/stw.jpg" class="img-fluid" alt="Responsive image">
</div>

<div class="alert alert-dark text-center" role="alert">
  <h2 class="name mb-0">Loading...</h2>
</div>

<div class="row">

</div>

</div>

2
  • 1
    Aunque deberías plantearte evitar el JS inline en el HTML. Sería mejor que crearas los eventos JS dentro del propio JavaScript con addEventListener o usando jQuery (ya que lo tienes en el proyecto).
    – Alvaro Montoro
    Commented el 14 oct. 2017 a las 18:54
  • como seria con el add event listener? Commented el 14 oct. 2017 a las 20:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.