Onclick su elementi creati con script non funziona

06-09-2016, 00.32.37

Salve ragazzi chiedo scusa per la domanda davvero stupida.
Tramite una pagina php creo degli elementi span di html.
Allora tramite JavaScript ho assegnato a questi elementi l'evento onclick e stampato qualcosa e funziona tutto.
Per pura curiosità ho voluto provare Jquery ma non mi funziona, il click non è riconosciuto!

Parte che stampa gli elementi span

Codice PHP:


...
$hint = "<br><span> $name </span>";
...
echo $hint;

Pagina html dove non funziona il codice:

Codice PHP:


<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
  $( "span" ).click(function() {
    alert( "Handler for .click() called." );
  });
});
</script>

<script>
function showHint(str) {
    if (str.length == 0) {
        document.getElementById("txtHint").innerHTML = "";
        document.getElementById("txtHint").style.border="0px";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
                document.getElementById("txtHint").style.border="1px solid #A5ACB2";
                 document.getElementById("txtHint").style.width="240px";
            }
        };
        xmlhttp.open("GET", "getRicerca.php?q=" + str, true);
        xmlhttp.send();
    }
}
/*function prova(testo) {
    document.getElementById("ricerca").value = testo;
    document.getElementById("txtHint").innerHTML = "";
    document.getElementById("txtHint").style.border="0px";
} */
</script>





</head>
<body>

<p><b>Start typing a name in the input field below:</b></p>
<form>
First name:<br>
<input type="text" id="ricerca" size="30" onkeyup="showHint(this.value)">
<input type="button" value="Conferma">
<div id="txtHint"></div>


</form>
</body>
</html>

Praticamente c'è una chiamata Ajax e in base alla lettera che scrivo escono dei suggerimenti (appunto gli elementi span).
Nei commenti vedete il codice JavaScript che invece funziona! (in tal caso negli script php c'era scritto <br><span onclick='prova(this.innerHTML)'> $name </span>
Ho provato a cambiare span con p.
Ho provato a togliere il document.ready e lasciare solamente il click ma nulla.
Jquery funziona perchè se faccio alert("ciao") al document ready me lo stampa.
Ho provato pure a creare un paragrafo, dargli un id e provare a stampare qualcosa all'evento click ma nulla.
Il problema è come se non vedesse gli span, ma comunque quando li stampo con lo script php è come se fossero in quella pagina!
Ho tentato anche di separare i tag script (come ho lasciato per ora).
Ora sono troppo curioso di capire il problema, vi ringrazio!

**mzanella** · 06-09-2016, 10.30.50

Se ho capito bene, lo span nella pagina non viene creato da JavaScript o PHP, ma fa parte della risposta AJAX. È un po' strano, quando si usa AJAX di solito i messaggi scambiati dovrebbero contenere solo informazione, non struttura (quindi non tag HTML).
Credo che jQuery non riconosca lo span proprio perché viene creato in questo modo, ma non posso dire di esserne certo.

06-09-2016, 10.55.44

Originalmente inviato da mzanella

Se ho capito bene, lo span nella pagina non viene creato da JavaScript o PHP, ma fa parte della risposta AJAX. È un po' strano, quando si usa AJAX di solito i messaggi scambiati dovrebbero contenere solo informazione, non struttura (quindi non tag HTML).
Credo che jQuery non riconosca lo span proprio perché viene creato in questo modo, ma non posso dire di esserne certo.

Ti ringrazio per la risposta.
Ho cercato meglio e c'erano svariati post su stackoverflow.
Ho creato un evento tramite il metodo on e funge

Codice PHP:


$(document).on('click', 'span', function(){

    alert("success");

});

**mzanella** · 06-09-2016, 11.02.26

Meglio così! Per caso su StackOverflow hai anche scoperto perché in un modo funziona e nell'altro no?

06-09-2016, 12.17.01

Originalmente inviato da mzanella

Meglio così! Per caso su StackOverflow hai anche scoperto perché in un modo funziona e nell'altro no?

Se ho capito bene non funziona perchè l'evento click funziona solamente su elementi già caricati dalla pagina. Bisogna usare il metodo "on" che attacca un gestore di eventi all'elemento.
Nella fattispecie comunque si usa una versione di on con 3 parametri dove agli elementi selezionati (in questo caso document) si attacca un gestore di eventi di tipo click, ed in più si specifica un terzo parametro (childSelector) che specifica che l'evento deve essere assegnato solo a determinati child di document (nel mio caso span).

**mzanella** · 06-09-2016, 14.50.08

Mh, buono a sapersi. Grazie!

**zyro** · 18-10-2016, 09.29.14

Ho un problema simile in una mia struttura, a una determinata azione con jquery richiamo una pagina php che a sua volta ha inclusa all'interno un'altra pagina php, ma mi sono accorto che questa seconda pagina non viene mai caricata, quindi basterebbe solo che modifichi l'evento click con on e secondo voi potrebbe essere richiamata la seconda pagina?

**darbula** · 18-10-2016, 12.20.02

Ma tecnicamente secondo il doc il .on è implicito.. https://api.jquery.com/click/ .. per abbinare qualcosa a jquery assicurati che sia un oggetto jquery $("#id") dove $ è un alias di jQuery() e qui alcune nozioni sull'evento onkeyup https://api.jquery.com/keyup/..
EDIT il codice sopra dovrebbe essere una funzione inserita tramite attributo nell'elemento input e successivamente deve esistere questa funzione nel tag script.
http://www.w3schools.com/jsref/tryit...yjsref_onkeyup
EDIT2:

Codice HTML:

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
function myFunction() {
var x = $("#fname");
return x = x.val(x.val().toUpperCase());
}
</script>
<body>

<p>A function is triggered when the user releases a key in the input field. The function transforms the character to upper case.</p>
Enter your name: <input type="text" id="fname" onkeyup="myFunction()">


</body>
</html>

Non so se il return è scritto in modo corretto, eventualmente segnalate grazie.

**darbula** · 21-10-2016, 15.33.52

Scusate per il doppio post, ma vi riporto i codici javascript e jquery d'esempio (ho qualche problema con lo stile css).
getRicerca.php

Codice PHP:


<?php
if(!empty($_GET['q']) == True) {
$name = "{$_GET['q']}";
$hint ="<span onclick=\"prova(this.innerHTML)\">${name}</span>";
echo "${hint}";
}
?>

ho tolto il br e gli spazi prima e dopo $name.
javascript.html

Codice HTML:

<!DOCTYPE html>
<html>
<head>

 <script>
var n = 0;
function showHint(str) {
    x = document.getElementById("txtHint");
    if (str.length > 5) {
        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                x.innerHTML = this.responseText;
                  x.style.border="1px solid #A5ACB2";
                  x.style.width="240px";
            }
        };
        xmlhttp.open("GET", "getRicerca.php?q=" + str, true);
        xmlhttp.send();
    }
n = 1;
}
function prova(testo) {
    document.getElementById("ricerca").value = testo;
    x.innerHTML = "";
    n = 2;
}
if (n != 1) {
x.style.border="0px";
}
</script>





</head>
<body>

<p><b>Start typing a name in the input field below:</b></p>
<form>
First name:<br>
<input type="text" id="ricerca" size="30" onkeyup="showHint(this.value)">
<input type="button" value="Conferma">
<div id="txtHint"></div>


</form>
</body>
</html>

jquery.html

Codice HTML:

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>

 <script>
var n = 0;
function showHint(str) {
    x = $("#txtHint");
    if (str.length > 5) {
        $.ajax({
            url: "getRicerca.php",
            data: "q=" + str,
            cache: false,
            success: function( msg ) {
            x.html( msg );
            x.css({"borderLeft" : "1px solid #A5ACB2", " width" : "240px" });
            n = 1;
            }
       });
    }
}
function prova(testo) {
    $("#ricerca").val(testo);
    x.html("");
    n = 2;
}
if (n != 1) {
x.css("borderLeft", "0px");
}
</script>





</head>
<body>

<p><b>Start typing a name in the input field below:</b></p>
<form>
First name:<br>
<input type="text" id="ricerca" size="30" onkeyup="showHint(this.value)">
<input type="button" value="Conferma">
<div id="txtHint"></div>


</form>
</body>
</html>

Gli eventi sono già inseriti nel markup ("onkeyup" e "onclick").
Spero d'avere fatto una cosa gradita.

Discussione: Onclick su elementi creati con script non funziona

LinkBack

Strumenti discussione

Display

Onclick su elementi creati con script non funziona

Regole di scrittura