Funzione clic jQuery vs onclick in linea

StackOverflow https://stackoverflow.com/questions/815856

  •  03-07-2019
  •  | 
  •  

Domanda

Sto cercando di riorganizzare il mio codice e renderlo più discreto.

Principalmente, esiste un collegamento per eseguire un'azione. Se si fa clic sul collegamento, l'azione viene eseguita tramite ajax (il codice ajax non è sul codice qui) e il testo viene sostituito da un altro testo, offrendo all'utente la possibilità di annullare l'azione. Se l'utente fa clic sul collegamento Annulla, ajax ripristina la situazione precedente e il testo che offre all'utente esegue l'azione mostrata di nuovo.

Ho creato una versione più semplice del mio problema in un singolo file html (codice sotto). Ci sono due paragrafi. Se si fa clic sul collegamento del primo paragrafo, che utilizza la chiamata onclick in linea, il codice funziona come previsto. Ma se fai clic sul collegamento del secondo paragrafo, che utilizza la funzione jQuery onclick, il collegamento Annulla non funziona e non riesco a capire perché.

Qualche aiuto? Grazie mille! 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        $(function() {      
            $(".add2").click(function(){
                var placeId = $(this).parents(".place").attr("id");
                $("#" + placeId + " .add2").remove();
                $("#" + placeId + " .actions").append("<span class=\"added\">Added!</span> <a class=\"undoadd2\" href=\"#\">Undo</a>");
                return false;
            })
            $(".undoadd2").click(function(){
                var placeId = $(this).parents(".place").attr("id");
                $("#" + placeId + " .actions").find("span.added, a.add2").remove();
                $("#" + placeId + " .actions").append("<a class='add2' onclick='copyPlace(\"" + placeId + "\"); return false;' href='#'>Add place</a>");
                return false;
            })
        });

        function addPlace(placeId){
            $("#" + placeId + " .add").remove();
            $("#" + placeId + " .actions").append("<span class=\"added\">Added!</span> <a class=\"undoadd\" href=\"#\" onclick=\"undoAddPlace('" + placeId + "'); return false;\">Undo</a>");
            return false;
        }

        function undoAddPlace(placeId){
            $("#" + placeId + " .actions").find("span.added, a.undoadd").remove();
            $("#" + placeId + " .actions").append("<a class='add' onclick='addPlace(\"" + placeId + "\"); return false;' href='#'>Add place</a>");
            return false;
        }
    </script>

</head>
<body id="home">
    <div class="place" id="3435910">
        <p class="actions"><a href="#" onclick="addPlace('3435910'); return false;" class="add">Add place</a></p>
    </div>

    <div class="place" id="3435912">
        <p class="actions"><a href="#" class="add2">Add place</a></p>
    </div>
</body>
</html>
È stato utile?

Soluzione

  

Dato che stai aggiungendo dinamicamente nuovo   articoli per il DOM, dovrai farlo   registra nuovamente il gestore dei clic   i nuovi elementi.

Puoi usare .live per questo.

Aggiorna

Da jQuery 1.7, il metodo .on è preferito per fare questo.

Da jQuery 1.9 il .live metodo è stato rimosso.

Altri suggerimenti

Sto solo dimostrando l'uso di .end () per una soluzione più fluida: 

$(function() {          
    $(".add2").click(function(){
            return $(this).parents(".place")
                .find(".add2")
                    .hide()
                .end()
                .find(".actions")
                    .append("<span class=\"added\">Added!</span> <a class=\"undoadd2\" href=\"#\">Undo</a>");
    });
    $('.undoadd2').live('click', function(){ 
            return $(this).parents(".place")
                .find(".actions")
                    .find("span.added, a.undoadd2")
                        .remove()
                    .end()
                .end()
                .find(".add2")
                    .show();
    });
});

Poiché stai aggiungendo dinamicamente nuovi elementi al DOM, dovrai registrare nuovamente il gestore click sui nuovi articoli. jQuery imposta il gestore quando si chiama $ ('...'). fare clic su (...) .

Wow !! Grazie a tutti voi!

Ho letto dell'evento dal vivo e il codice di lavoro finale è: 

$(function() {      
            $(".add2").click(function(){
                var placeId = $(this).parents(".place").attr("id");
                $("#" + placeId + " .add2").hide();
                $("#" + placeId + " .actions").append("<span class=\"added\">Added!</span> <a class=\"undoadd2\" href=\"#\">Undo</a>");
                return false;
            })
            $('.undoadd2').live('click', function(){ 
                var placeId = $(this).parents(".place").attr("id");
                $("#" + placeId + " .actions").find("span.added, a.undoadd2").remove();
                $("#" + placeId + " .add2").show();
                return false;
            });

Precedentemente ho usato remove () per eliminare il testo che offre per eseguire l'azione. L'ho cambiato per hide / show, quindi non devo usare live anche nella prima funzione.

Grazie ancora!

Il gestore di clic non viene raccolto quando aggiungi l'elemento al DOM. Prova a utilizzare jQuery per registrare il gestore di clic modificando le righe che sembrano: 

$("#" + placeId + " .actions").append("<span class=\"added\">Added!</span> <a class=\"undoadd\" href=\"#\" onclick=\"undoAddPlace('" + placeId + "'); return false;\">Undo</a>")

Per 

$("#" + placeId + " .actions").append("<span class=\"added\">Added!</span> <a class=\"undoadd\" href=\"#\" >Undo</a>");
$('#' + placeId + " .actions").find("span:last").find("a").click( function() {
    undoAddPlace( placeId );
    return false;
});

Potresti essere in grado di farlo più semplicemente, ma sembra che potresti aggiungere più di un intervallo al paragrafo, quindi sono diventato conservatore. Probabilmente potresti anche chiudere a catena l'appendice, ma ho pensato che la riselezione chiarisse il punto.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top