jQuery-dynamische element - styling nicht angewendet werden,

Ich habe 2 Button die, wenn Sie geklickt haben, entweder einen neuen Absatz hinzufügen oder entfernen einer aktuellen Absatz. Dies geschieht mit Hilfe jQuery. Ich bin auch mit jQuery zum ändern der Farbe von den Absatz-text von schwarz zu rot auf hover. Das problem, das ich habe, ist, dass, nachdem ich einen neuen Absatz hinzufügen mit jQuery, der hover-Effekt wird nicht angewendet. Es funktioniert für die ursprünglichen Absätze, aber nicht für diejenigen, die werden dynamisch erstellt.

Wenn ich mir die source code von der Seite sehe ich, dass die ursprünglichen Absätze haben, Sie inline-Stile auf Sie anzuwenden, aber nicht die, die ich Hinzugefügt über jQuery. Ich habe gesucht online für die letzten Stunden versucht eine Lösung zu finden, aber bisher keine für mich gearbeitet. Ich fand einige ähnliche Fragen, aber die Lösungen entweder hat bei mir nicht funktioniert oder ich nicht anwenden, Sie richtig. Die Sache ist, dass ich buchstäblich begann zu lernen jQuery ein paar Stunden und kann daher nicht sicher, ob ich die Befestigung etwas oder macht es schlimmer. Auch die meisten der Fragen, die ich habe zu tun mit jQuery Mobile die verwirrt mich noch mehr als ich arbeite auf meinem PC.

http://jsfiddle.net/2Xh75/

HTML

<button>Add line</button>
<button>Remove line</button>

<div id="p_wrap">
    <p> Original Line </p>
    <p> Original Line </p>
    <p> Original Line </p>
</div>

jQuery

$(document).ready(function(){

    //Add line   
    $("button:nth-of-type(1)").click(function(){
        $("#p_wrap").append("<p>New Line</p>");
    });

    //Remove line
    $("button:nth-of-type(2)").click(function(){
    $("p:last-of-type").remove();
    });

    //Hover effect
    $("p").hover(
      function(){
          $(this).css("color", "red");
      },
      function(){
          $(this).css("color", "black");
      }
    );

}); //Document Ready End

Hier sind einige der Fragen, die ich bereits angeschaut:

Zwingen jQuery Mobile neu zu bewerten styles/themes auf dynamisch eingefügte Inhalte

jQuery Mobile gilt nicht für styles nach dynamisch hinzufügen von Inhalten

jquery styles nicht angewandt dynamisch Schöpfung

Ich entschuldige mich im Voraus, da dies wahrscheinlich eine noob Frage, aber es hat mich ratlos und ich wäre jede Hilfe dankbar.

-Danke

möglich, Duplikat der Jquery.Hover funktioniert nicht für dynamische Element

InformationsquelleAutor user1919802 | 2013-07-30

5

Sollten Sie verwenden .on als es binden neue Elemente, die Sie angefügt werden dynamisch in den DOM -
```
$(document).on('mouseover', 'p',  function () {       
 $(this).css("color", "red");
}).on('mouseout', 'p',  function () {       
 $(this).css("color", "black");
});;
```
- Ich bin damit einverstanden, ist dies die beste Lösung. jsfiddle.net/2Xh75/13
- +1 - können Sie auch ein Objekt übergeben von Ereignissen an on() jsfiddle.net/2Xh75/15
InformationsquelleAutor JohnJohnGa
1

Elemente, die Sie ausgewählt war nicht vorhanden, wenn Sie definieren, jQuery-Wahlschalter für "p", sollten Sie "auf" - Funktion:
```
$("p").on({
   mouseenter: function() 
   {
      //mouseover css
   },
   mouseleave: function()
   {
      //mouseleave css
   }
});
```
- Funktioniert nicht für dynamisch hinzugefügte Elemente.
- Es funktioniert nur für statische Elemente. Die Frage dynamicly angehängt Elemente.
- ist Recht, dies funktioniert nicht für dynamische Elemente.
InformationsquelleAutor fmgp
0

Versuchen, css zu benutzen, die für diese Art von hover-Effekt. Der Grund, es funktioniert nicht mit jquery ist, weil Ihr nicht die übertragung der Veranstaltung auf einen Elternteil mithilfe der .on().

Fiddle Demo
```
p:hover
{
    color:red
}
```
- Ich weiß, ich Mach es mit CSS, ich wollte nur wissen, ob es eine jQuery Lösung. Ich dachte, dass ich da gerade angefangen zu lernen, es vielleicht war ich etwas fehlt. Trotzdem danke für die schnelle Antwort
InformationsquelleAutor Tomas Santos
0

Können Sie die hover-Effekt rein mit CSS - - - - fast immer die bessere Wahl:
```
#p_wrap > p:hover
{
    color: red
}
```
Auch ich würde empfehlen die Umgestaltung der Klick-Handler mit den neueren bevorzugt on syntax:
```
$("button:nth-of-type(1)").on("click", function(){
    $("#p_wrap").append("<p>New Line</p>");
});
```
InformationsquelleAutor David Goss

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.