[英]jQuery replace DIV to INPUT and vice versa
我正在实现一种内联编辑功能。
因此,最初将显示日期标签(例如 05/01/1999),单击它时,它将被替换为具有相同值(05/01/1999)的输入框。 现在用户可以使用 jQuery UI 日期选择器选择任何日期,并在选择任何日期(比如 05/01/2005)时,我会再次显示一个标签(05/01/2005)
目前我正在使用以下代码;
$(document).on("click",".editableDateTxt", function () {
var currElmModelAttr = $(this).attr('data-model-attr');
var input = $('<input />', {'type': 'text','name':currElmModelAttr, 'style':'width:100px','class':'datePicker', 'value': $(this).html()});
var parent = $(this).parent();
parent.append(input);
$(this).remove();
input.datepicker().focus();
});
实现相同的最佳方法是什么?
现在是关键点:我正在使用jQuery UI datepicker ,它在内部使用 jQuery data()。 所以我不想在从 div > input 跳转时松开它,反之亦然。
如何修改上面的代码以考虑保留 jQuery data() 信息?
var MyView = BaseModalView.extend({
el: "#myModalContainer",
initialize: function() {
var self = this;
},
render: function() {
var self = this,
$el = $(self.el);
$el.find(".datePicker").datepicker();
self.initEventListeners();
},
initEventListeners: function() {
var self = this,
$el = $(self.el);
var $this;
$(document).on("click", ".editableDateTxt", function () {
var currElmModelId = $(this).attr('data-model-id');
var currElmModelAttr = $(this).attr('data-model-attr');
$this = $(this);
var input = $('<input />', {
'type': 'text',
'name': currElmModelAttr,
'data-model-id': currElmModelId,
'data-model-attr': currElmModelAttr,
'style': 'width:100px',
'class': 'datePicker',
'value': $(this).text()
});
$(this).replaceWith(input);
input.datepicker({
onSelect: function (date) {
$this.text(date);
input.replaceWith($this);
// input.blur();
}
}).focus();
$(document).on("blur change", "input", function () {
setTimeout(function () {
var value = input.val();
$this.text(value);
input.replaceWith($this);
}, 100);
});
});
}
你可以用replaceWith()
更好地交换
$(document).on("click", ".editableDateTxt", function () {
var currElmModelAttr = $(this).attr('data-model-attr');
var $this = $(this);
var input = $('<input />', {
'type': 'text',
'name': currElmModelAttr,
'style': 'width:100px',
'class': 'datePicker',
'value': $(this).text()
});
$(this).replaceWith(input);
input.datepicker({
onSelect: function (date) {
$this.text(date);
input.replaceWith($this);
console.log(date);
}
})
});
另外,我建议您隐藏/显示元素,在这种情况下会更好,而不是每次都创建和交换元素。
这是一个更简单的版本,正如@Shaunak D 所建议的,使用基本的hide()
和show()
。
^_^ jsfiddle 示例
html代码:
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<div id="lbl"></div>
<input type='text' id="date-picker" />
JS代码:
$('#lbl').html('2014-01-01');
$('#date-picker').hide();
$('#date-picker').datepicker({
onSelect: function(date) {
$('#lbl').html(date);
$(this).hide();
$('#lbl').show();
}
});
$('#lbl').click(function(){
//alert();
$(this).hide();
$('#date-picker').show();
});
最好的方法是使用带有日期选择器的只读输入字段。 使用 div 并替换为输入字段是否有任何原因?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.