jQuery-Ereignisse für angehängte Inhalte mit .on?

Ich habe Inhalt (mit Ajax) an mein Dokument angefügt und meine Ereignisse werden nicht ausgelöst. Ich weiß, dass dies mit .live() getan werden kann, aber ich habe irgendwo gelesen, dass es jetzt veraltet ist?jQuery-Ereignisse für angehängte Inhalte mit .on?

Dies ist mein Code (es funktioniert auf Dokument bereit in Ordnung, aber nicht auf den neu angefügten Artikel):

$('li[id^="inv-"] a.close').on('click', function(){ 
var item=($(this).closest("li[id^='inv-']")).attr('id'); 
var id = parseInt(item.replace("inv-", "")); 
$.ajax({ 
    type: "POST", 
    url: "ajax-invi.php", 
    dataType: "html", 
    data: "id="+idboda+"&idinv="+id+"&borrar=ok", 
    success: function(data) { 
    noty({"text":"El invitado ha sido borrado"}); 
    $("body").find('li#inv-' + id).remove(); 
    } 
    }); 
});

Und die Elemente:

<ul> 
    <li id="inv-39"> 
    <div class="row_field"> 
    <label>Adri</label> 
    <a class="close" href="#invlist">Borrar</a> 
    </div>     
    </li> 
    <li id="inv-40"> 
    <div class="row_field"> 
    <label>Marga</label> 
    <a class="close" href="#invlist">Borrar</a> 
    </div> 
    </li> 
</ul>

Quelle

2012-03-26 Elaine Marley

'e.preventDefault();' ist der Trick http://stackoverflow.com/a/9869024/880434 –

versuchen

$('ul').on('click','a.close', function(){ 
var item=($(this).closest("li[id^='inv-']")).attr('id'); 
var id = parseInt(item.replace("inv-", "")); 
$.ajax({ 
    type: "POST", 
    url: "ajax-invi.php", 
    dataType: "html", 
    data: "id="+idboda+"&idinv="+id+"&borrar=ok", 
    success: function(data) { 
    noty({"text":"El invitado ha sido borrado"}); 
    $("body").find('li#inv-' + id).remove(); 
    } 
    }); 
});

auf diese Weise delegieren Sie die Ereignisbehandlung an die ul, die vorhanden ist, wenn das DOM geladen wird, und behandelt die Ereignisse von elem über AJAX hinzugefügt. Wenn die UL ist nicht vorhanden, wenn der Dom geladen wird Sie in die <body> Tag delegieren konnte

EDIT - Leben() ist es eigentlich ein Wrapper um on() (bevor es ein Wrapper um delegate() war), aber die Delegierten das Ereignis in der Regel mit der Handhabung window was bedeutet, dass die Veranstaltung viel aufblühen muss. Genommen von jQuery Quelle

live: function(types, data, fn) { 
    jQuery(this.context).on(types, this.selector, data, fn); 
    return this; 
},

Quelle

2012-03-26 08:44:22

Ja, das ist, was ich brauchte. Ich dachte, on() würde funktionieren wie .live(), warum ist das? –

@ElaineMarley live() war eigentlich ein Wrapper um Delegate() (jetzt ist ein Wrapper rund um()), wie ich meine Antwort mit etwas Hintergrund bearbeitet –

Danke für die Info, ich musste lernen, wie man das richtig macht –

$(document).on('click', 'li[id^="inv-"] a.close', function(){ 
//... 
});

Also, Sie Ereignis zu einem gewissen übergeordnete Element anhängen, die für Geschwister sieht, die auf Seite-Laden existiert und das wird in Zukunft angehängt werden.

Quelle

2012-03-26 08:47:52 Smileek

jQuery-Ereignisse für angehängte Inhalte mit .on?

Antwort

Verwandte Themen