Jquery aus Element entfernen und erneut anwenden?

Ich benutze wickepicker und habe eine Seite mit 2 Zeitfeldern.Jquery aus Element entfernen und erneut anwenden?

Ich muss die Zeit in jedem Feld separat zu den anderen aktualisieren, wie eine Taste gedrückt wird.

Alles, was ich versucht habe funktioniert nicht, und ich nehme an, es ist, weil das Skript bereits an das Eingabeelement gebunden ist (nicht sicher, ob das der richtige Begriff ist).

Also meine Frage ist, kann ein Skript geladen und gebunden, entladen und dann erneut mit verschiedenen Parametern angewendet werden?

Dies ist der Code, den ich derzeit habe:

<script> 
     $(document).ready(function() { 
      $(".timepicker").wickedpicker({twentyFour: true}); 


      $("#btn").click(function(e) { 
       alert ('click') 
       $("#timeTwo").wickedpicker({twentyFour: true, now: "17:35"}); 
      }) 
     }); 
    </script> 

    <body> 

    <button id='btn' class='formBtn'>CHANGE</button> 

    <input type='text' class='timepicker' id='timeOne' name='timeOne' value='' > 

    <input type='text' class='timepicker' id='timeTwo' name='timeTwo' value='' > 

    </body>

I Timepicker ursprünglich Laden bin, als ich die Fähigkeit, es zu benutzen sofort brauchen, aber ich brauche auch die Möglichkeit, die Zeit von der Schaltfläche klicken aktualisieren .

Ich habe versucht, einen Standardwert in timeTwo, die von Timepicker überschrieben wird, zu setzen. Ich habe JQuery benutzt, um den Wert von timeTwo einzustellen, und die Eingabe zeigt den korrekten Wert an, aber der timepicker zeigt jetzt die Zeit an, NICHT, was das Feld zeigt.

Irgendwelche Ideen? Dank

UPDATE entfernen und readding das Element funktioniert.

$("#btn").click(function(e) { 
    console.log ('click') 
    var test = $("#timeTwo").remove(); 
    $('body').append(test); // later 
    $("#timeTwo").wickedpicker({twentyFour: true, now: '15:34'}); 
});

Aber wie stelle ich sicher, dass es wieder an den gleichen Ort geladen wird? Dank

Quelle

2016-09-13 Tom

Ich bin nicht sicher, dass Sie meine Antwort aktualisiert lesen, dass das Problem nicht lösen ... –

Die wickedpicker ab hier: https://ericjgagnon.github.io/wickedpicker/ hat keine Methode, um die intern verwendete Zeit einzustellen. Da es erkennt, ob ein Element bereits einen schlechten Tipp hat, können Sie es nicht einfach ein zweites Mal anwenden, wie Sie bereits bemerkt haben. Die sauberste Lösung wäre es, den Teufel mit der benötigten Funktionalität zu erweitern. Eine andere Problemumgehung kann sein, die Eingabe zu entfernen und neu zu erstellen.

EDIT: Ich machte Ihnen ein kleines Schnipsel, um den Austausch des Pickers zu demonstrieren. Es ist nicht wirklich eine nette Lösung, da es andere Ereignisse oder Verweise auf/auf das Datepicker-Element unterbricht. Du musst vorsichtig mit denen sein.

Die Erweiterung des ursprünglichen Wickedpicker wäre auch nicht sehr schwer, aber ich denke, ist jenseits dieser Frage.

PS: Bitte ignorieren Sie den CSS-Teil. Ich musste den wickedpicker css einreihen, um es zum Funktionieren zu bringen (minus der richtigen Schriftart). Sie sollten nur den Javascript-Teil benötigen.

$(document).ready(function() { 
 
    $(".timepicker").wickedpicker({ 
 
    twentyFour: true 
 
    }); 
 

 

 
    $("#btn").click(function(e) { 
 
    $("#timeTwo").replaceWith("<input type='text' class='timepicker' id='timeTwo' name='timeTwo' value='' />"); 
 
    $("#timeTwo").wickedpicker({ 
 
     twentyFour: true, 
 
     now: "17:35" 
 
    }); 
 
    }) 
 
});

.wickedpicker { 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    box-shadow: 0 0 0 1px rgba(14, 41, 57, .12), 0 2px 5px rgba(14, 41, 57, .44), inset 0 -1px 2px rgba(14, 41, 57, .15); 
 
    background: #fefefe; 
 
    margin: 0 auto; 
 
    border-radius: .1px; 
 
    width: 270px; 
 
    height: 130px; 
 
    font-size: 14px; 
 
    display: none 
 
} 
 
.wickedpicker__title { 
 
    background-image: -webkit-linear-gradient(top, #fff 0, #f2f2f2 100%); 
 
    position: relative; 
 
    background: #f2f2f2; 
 
    margin: 0 auto; 
 
    border-bottom: 1px solid #e5e5e5; 
 
    padding: 12px 11px 10px 15px; 
 
    color: #4C4C4C; 
 
    font-size: inherit 
 
} 
 
.wickedpicker__close { 
 
    -webkit-transform: translateY(-25%); 
 
    -moz-transform: translateY(-25%); 
 
    -ms-transform: translateY(-25%); 
 
    -o-transform: translateY(-25%); 
 
    transform: translateY(-25%); 
 
    position: absolute; 
 
    top: 25%; 
 
    right: 10px; 
 
    color: #34495e; 
 
    cursor: pointer 
 
} 
 
.wickedpicker__close:before { 
 
    content: '\00d7' 
 
} 
 
.wickedpicker__controls { 
 
    padding: 10px 0; 
 
    line-height: normal; 
 
    margin: 0 
 
} 
 
.wickedpicker__controls__control, 
 
.wickedpicker__controls__control--separator { 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
    font-size: inherit; 
 
    margin: 0 auto; 
 
    width: 35px; 
 
    letter-spacing: 1.3px 
 
} 
 
.wickedpicker__controls__control-down, 
 
.wickedpicker__controls__control-up { 
 
    color: #34495e; 
 
    position: relative; 
 
    display: block; 
 
    margin: 3px auto; 
 
    font-size: 18px; 
 
    cursor: pointer 
 
} 
 
.wickedpicker__controls__control-up:before { 
 
    content: '\e800' 
 
} 
 
.wickedpicker__controls__control-down:after { 
 
    content: '\e801' 
 
} 
 
.wickedpicker__controls__control--separator { 
 
    width: 5px 
 
} 
 
.text-center, 
 
.wickedpicker__controls, 
 
.wickedpicker__controls__control, 
 
.wickedpicker__controls__control--separator, 
 
.wickedpicker__controls__control-down, 
 
.wickedpicker__controls__control-up, 
 
.wickedpicker__title { 
 
    text-align: center 
 
} 
 
.hover-state { 
 
    color: #3498db 
 
} 
 
@font-face{font-family:fontello;src:url(../fonts/fontello.eot?52602240);src:url(../fonts/fontello.eot?52602240#iefix) format("embedded-opentype"), 
 
url(../fonts/fontello.woff?52602240) format("woff"), 
 
url(../fonts/fontello.ttf?52602240) format("truetype"), 
 
url(../fonts/fontello.svg?52602240#fontello) format("svg"); 
 
font-weight:400; 
 
font-style:normal 
 
} 
 
.fontello-after:after, 
 
.fontello:before, 
 
.wickedpicker__controls__control-down:after, 
 
.wickedpicker__controls__control-up:before { 
 
    font-family: fontello; 
 
    font-style: normal; 
 
    font-weight: 400; 
 
    speak: none; 
 
    display: inline-block; 
 
    text-decoration: inherit; 
 
    width: 1em; 
 
    margin-right: .2em; 
 
    text-align: center; 
 
    font-variant: normal; 
 
    text-transform: none; 
 
    line-height: 1em; 
 
    margin-left: .2em; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale 
 
} 
 
.clearable-picker { 
 
    position: relative; 
 
    display: inline-block 
 
} 
 
.clearable-picker>.hasWickedpicker { 
 
    padding-right: 1em 
 
} 
 
.clearable-picker>.hasWickedpicker::-ms-clear { 
 
    display: none 
 
} 
 
.clearable-picker>[data-clear-picker] { 
 
    position: absolute; 
 
    top: 50%; 
 
    right: 0; 
 
    transform: translateY(-50%); 
 
    font-weight: 700; 
 
    font-size: .8em; 
 
    padding: 0 .3em .2em; 
 
    line-height: 1; 
 
    color: #bababa; 
 
    cursor: pointer 
 
} 
 
.clearable-picker>[data-clear-picker]:hover { 
 
    color: #a1a1a1 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://raw.githubusercontent.com/ericjgagnon/wickedpicker/master/dist/wickedpicker.min.js"></script> 
 

 
<button id='btn' class='formBtn'>CHANGE</button> 
 
<input type='text' class='timepicker' id='timeOne' name='timeOne' value='' /> 
 
<input type='text' class='timepicker' id='timeTwo' name='timeTwo' value='' />

Quelle

2016-09-13 11:45:02

Danke für die Antwort. wickedpicker hat 'jetzt' als Option. Aber es sieht so aus, als könntest du es nicht einmal ändern. Ich habe keine Ahnung, wie ich es erweitern kann.Wie kann ich die Eingabe entfernen und neu erstellen? – Tom

Die Option 'Jetzt' dient nur zum Erstellen neuer Kommissionierer. Sehen Sie meinen editierten Beitrag oben für die Antwort auf Ihre letzte Frage. –

Perfekt - danke das hilft sehr .. – Tom

Sie können wie unten tun erwähnt, können Sie Option dynamisch ändern es nach initialisieren .. siehe document

$(document).ready(function() { 
    $(".timepicker").wickedpicker({twentyFour: true}); 
    $("#btn").click(function(e) { 
     alert ('click') 
     $("#timeTwo").wickedpicker('twentyFour', true); 
     $("#timeTwo").wickedpicker('now', "17:35"); 
    }); 
});

Quelle

2016-09-13 11:17:10

Hallo. Das funktioniert nicht. Ein Klick auf die Schaltfläche gibt die Warnung und sonst nichts. – Tom

Jquery aus Element entfernen und erneut anwenden?

Antwort

Verwandte Themen