2013-02-13 6 views
6

Mit Font Awesome, ich möchte das Symbol-entfernen Symbol verwenden. Also habe ich <i class="icon-remove"></i> in meinem HTML, was perfekt funktioniert. Allerdings wollte ich dies in jQuery bindbar machen, um ein div für mich zu schließen.Bei Verwendung einer Symbolschrift wie FontAwesome, wie kann ich die Symbole in jQuery binden?

So habe ich:

$(".icon-remove").click(function() { 
     alert("HELLO"); 
     $(".login-window").hide(); 
     $(".register-window").hide(); 
     $(".shadow").hide(); 
    }); 

Dies ist jedoch nicht funktioniert. Wenn ich darauf klicke, passiert nichts.

Dies ist das CSS, das ich verwendet habe (auch: cursor: pointer; funktioniert nicht).

.icon-remove { 
    display: block; 

    color: #444; 
    cursor: pointer; 
    float: right; 
    margin-right: 15px; 
} 

Was genau mache ich falsch?

Antwort

7

Wenn das Symbol nach dem Laden der Seite dynamisch hinzugefügt wurde, funktioniert dieses Klickereignis nicht. Sie müssen stattdessen on verwenden.

Hier ist eine Möglichkeit, es zu verwenden:

$(document).on("click", ".icon-remove", function() { 
    alert("HELLO"); 
    $(".login-window").hide(); 
    $(".register-window").hide(); 
    $(".shadow").hide(); 
}); 
+0

Ich habe diesen Code wörtlich verwendet und es hat immer noch nicht funktioniert. :/ –

+1

Ok, nun, in diesem Fall ist der nächste Schritt, nach Fehlern zu suchen, wie es Leniel vorgeschlagen hat, und alles zu posten, was du findest. Wenn Sie keine Fehler finden, müssen Sie entweder mehr Code posten oder eine funktionierende Demoversion bereitstellen. – frostyterrier

+0

arbeitete für mich, danke! – F481

0

Ihr Code ist OK. Vielleicht haben Sie einen Fehler in Ihrem JavaScript-Code, der verhindert, dass die ganze Sache funktioniert. Wenn Sie beispielsweise Firebug in Firefox verwenden, können Sie auf der Registerkarte "Konsole" nachsehen, ob ein Fehler in Ihrem Code vorliegt.

Hier ist der JS Bin Code zu testen: http://jsbin.com/obogof/4

Für den CSS Teil, müssen Sie sicher sein, dass Ihr CSS-Code nach irgendwelchen anderen CSS-Regeln kommt, die die .icon-remove Klasse beeinflussen. Es funktioniert hier richtig: http://jsbin.com/obogof/5

+0

Keine andere Regel betrifft die Klasse '.icon-remove'. :/ –

+0

Haben Sie einen anderen Fehler in Ihrer JavaScript-Klasse gefunden? –

+0

Es ist durchaus möglich, dass ich gerade nicht die Konsole richtig benutze, aber nein, wenn ich klicke, erscheint nichts in der Konsole. –

0

Wird Ihr Javascript ausgeführt, nachdem das DOM bereit ist? Sie benötigen Folgendes:

$(document).on("click", ".icon-remove", function() { 
    alert("HELLO"); 
    $(".login-window").hide(); 
    $(".register-window").hide(); 
    $(".shadow").hide(); 
}); 
Verwandte Themen