2009-07-31 11 views
2

ich irgendwie bin neu zu dieser so bitte Geduld mit mir ...AJAX nicht „Capturing“ Ereignis ohne Refresh

Lassen Sie uns sagen, ich habe diese Javascript-Code

$(document).ready(function() { 
    $("a").click(function() { 
     alert("Hello world!"); 
    }); 
}); 

So wie ich es verstehe , wird dieser Code jede Linkauswahl "erfassen" und ein Benachrichtigungsfeld posten. Normalerweise funktioniert das gut.

Jetzt, auf der gleichen Seite habe ich auch eine Tabelle, und beim Absenden, bin ich erfassen das Formular senden und mit JQuery, um die Zeile zu den Benutzern anzuzeigen, während die Daten an den Server gesendet werden.

Hier ist der Code, um die Post-Anforderung abfangen (meist aus Railscasts #136 genommen)

jQuery.ajaxSetup({ 
    'beforeSend': function(xhr) { 
     xhr.setRequestHeader("Accept", "text/javascript") 
    } 
}) 

jQuery.fn.submitWithAjax = function() { 
    this.submit(function() { 
     $.post(this.action, $(this).serialize(), null, "script"); 
     return false; 
    }) 
    return this; 
}; 

$(document).ready(function() { 
    $("#new_ride_form").submitWithAjax(); 
}) 

Hier ist der Code, um die teilweise zu machen ...

$("#add_new_ride").before("<%= escape_javascript(render(:partial => @ride)) %>"); 
$("#ride_<%[email protected] %>").effect("highlight", {color: '#aaffaa'}, 2000); 
$("#new_ride_form")[0].reset(); 

Hier ist der Code ist auf einen Link in erstellen eine der durch die partiellen

<td><%= link_to 'remove', ride_url(ride), 
    :id => :destroy_ride, 
    :method => :delete, 
    :href => delete_ride_url(ride) %> 
</td> 

Jetzt, wenn ich s Geben Sie das Formular ein und klicken Sie in der neu erstellten Tabellenzeile auf den Link "Entfernen". Es wird lediglich die Löschanforderung gesendet. Das JavaScript zum Erstellen der 'Hello World' Alarmbox wird nicht ausgeführt.

Wenn ich aber das Formular abschicke, erstellen Sie die neue Tabellenzeile, dann manuell aktualisieren Sie die Seite, vor dem Klicken auf den Link "Entfernen" in der neu erstellten Tabellenzeile, die "Hello World" -Alertbox erscheint als erwartet.

Was passiert hier, wo ich manuell aktualisieren muss, bevor Sie das erwartete Verhalten erhalten?

Gibt es ein "document.ready" -Ereignis oder etwas, das ich nach der Verwendung von AJAX auslösen muss, um die Tabellenzeile hinzuzufügen, um dem Code zu sagen, "hey, es gibt ein paar neue Sachen hier müssen Sie aufpassen".

Danke!

Übrigens schreibe ich in Rails und JQuery, aber ich bin nicht wirklich sicher, dass es darauf ankommt.

+0

Das $ ("a"). Click (function() {}); feuert einmal auf Dokument bereit. Sie müssen das Klickereignis manuell zu dynamisch erstellten Elementen hinzufügen. – doomspork

Antwort

4

Es klingt, als ob Sie jQuery.live anstelle von jQuery.click verwenden möchten. Der Unterschied ist, dass jQuery.click das Klickereignis für alle aktuellen Elemente bindet und jQuery.live alle aktuellen und zukünftigen Elemente bindet.

$(document).ready(function() { 
    $("a").live("click", function() { 
     alert("Hello world!"); 
    }); 
}); 
+0

Beat mich um 22 Sekunden! :-( – Kip

+0

jQuery.live ist eine großartige Antwort, aber da es anders als eine traditionelle Bindung funktioniert und nicht alle Ereignisse unterstützt werden, ist es wichtig, sich darüber zu informieren und sicherzustellen, dass es Ihre Bedürfnisse erfüllt. – doomspork

+0

Danke! Das war genau das, was ich brauchte. – Vinnie