从元素中删除Jquery并重新应用? [英] Remove Jquery from element and reapply?
问题描述
我正在使用wickedpicker，并且有一个包含2个时间字段的页面.
I'm using wickedpicker and have a page with 2 time fields.
按下按钮，我需要分别更新每个字段中的时间.
I need to update the time in each field separately to the other, as a button is pressed.
我尝试过的所有方法都不起作用，我认为这是因为脚本已经绑定到输入元素了(不确定这是否是正确的术语).
Everything I've tried doesn't work, and I assume it's because the script is already bound ( not sure if that is the correct term ) to the input element.
所以我的问题是可以加载并绑定，卸载然后重新使用不同参数的脚本吗?
So my question is can a script that is loaded and bound, be unloaded and then reapplied with different parameters ?
这是我目前拥有的代码:
This is the code I currently have :
<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'm loading timepicker originally as I need the ability to use it straight away, but I also need the ability to update the time from the button click.
我尝试在timeTwo中设置默认值，该默认值会被时间选择器覆盖.我已经使用JQuery设置timeTwo的值，并且输入显示正确的值，但是timepicker显示的是现在的时间，而不是该字段显示的时间.
I've tried setting a default value in timeTwo, which is overwritten by timepicker. I've used JQuery to set the val of timeTwo and the input shows the correct value, but the timepicker shows the time now, NOT what the field shows.
有什么想法吗? 谢谢
更新 删除并读取元素即可.
UPDATE removing and readding the element works.
$("#btn").click(function(e) {
console.log ('click')
var test = $("#timeTwo").remove();
$('body').append( test ); // later
$("#timeTwo").wickedpicker({twentyFour: true, now: '15:34'});
});
但是如何确保将其重新加载到同一位置? 谢谢
But how do I ensure it's loaded back to the same location ? Thanks
推荐答案
此处的wickedpicker: https://ericjgagnon.github.io/wickedpicker/没有设置内部使用时间的方法.如前所述，当它检测到某个元素是否已经具有wickedpicker时，您不能简单地再次应用它. 最干净的解决方案是使用所需的功能扩展wickedpicker.另一个解决方法可能是删除输入，然后重新创建.
The wickedpicker as of here: https://ericjgagnon.github.io/wickedpicker/ has no method to set the internally used time. As it detects if an element already has a wickedpicker, you can not simply apply it a second time, as you already noted. The cleanest solution would be to extend wickedpicker with the needed functionality. Another workaround may be to remove the input, and recreate it.
我为您提供了一个小片段，以演示如何更换选择器.这并不是一个很好的解决方案，因为它会破坏datepicker元素上的其他事件或引用.您必须要小心那些.
I made you a small snippet to demonstrate replacement of the picker. It's not really a nice solution, as it will break other events or references on/to the datepicker element. You'll have to be careful with those.
扩展原始的wickedpicker也不会很困难，但我认为超出了这个问题.
Extending the original wickedpicker would also not be very hard, but I think is beyond this question.
PS:请忽略CSS部分.我必须内联wickedpicker CSS以使其正常工作(减去正确的字体).您只需要javascript部分.
PS: Please ignore the css part. I had to inline the wickedpicker css to get it to work (minus the correct font). You should only need the javascript part.
$(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='' />
这篇关于从元素中删除Jquery并重新应用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
