Evento Javascript in InnerHTML risultante da PHP Server Script

Question

Evento Javascript in InnerHTML risultante da PHP Server Script

#1 da (1 voti)

0

Sto (molto lentamente) facendo un sito web , e sto creando un motore di ricerca per il database, che è essenziale per organizzare le dipendenze durante l'inserimento dei dati.

Ad ogni modo, ciò che vorrei è digitare alcune parole chiave in una casella, far apparire un menu con vari risultati di ricerca e riempire la casella con il numero ID della voce selezionata quando viene cliccato.

Attualmente, ho un documento chiamato search.php che riempie un div chiamato search-output usando xmlhttp.open () e la proprietà innerhtml. Tutto funziona perfettamente, tranne per il riempimento della casella di ricerca originale con il numero ID quando si fa clic.

Il mio primo tentativo è stato quello di aggiungere un evento onclick a ciascuna voce nell'output di search.php. Purtroppo, ho trovato che javascript inserito in innerhtml non viene eseguito per motivi di sicurezza. Sono stato su Google per ore ma non sono stato in grado di trovare una soluzione.

Come posso ottenere che la casella di testo di ricerca originale venga riempita con l'ID corretto quando faccio clic su di esso? È quello che sto facendo una buona installazione per i risultati che desidero, o c'è un modo migliore per integrare le funzionalità di ricerca in data entry?

web-development javascript

posta user144527 27.05.2014 - 07:30

fonte

1 risposta

Leggi altre domande sui tag web-development javascript

Fornisce il contenuto dal server all'HTML remoto Differenza tra scope lessicale e variabili passanti in JS

score 1 · Accepted Answer

Supponendo di avere ciò che intendi correttamente, la soluzione sarebbe avere un singolo gestore di eventi sul div che viene popolato con i risultati, e usare l'oggetto Event passato al gestore di eventi per determinare esattamente quale oggetto è stato colpito:

<input type="text" id="search" name="search">
<div id="search-popup"></div> <!-- This will be populated with partial results -->

E nel JavaScript, _{questo JavaScript non è inserito nella pagina, ma è parte di esso}:

var searchPopup = document.getElementById("search-popup");
searchPopup.onclick = function(event) {
    var actualClickedElement = event.target; //Magic is here
    //Handle your event, probably by changing searchInput.value
};

Ora puoi gestire le cose con actualClickedElement all'interno della funzione del gestore. Ciò fornisce anche un buon incremento delle prestazioni quando le cose diventano più grandi, dal momento che hai sempre un solo gestore.

Leggi su delegazione di eventi @ MDN .