我有一个模板生成器,它可以创建一个字符串模板,其中包含一些可以稍后修改的变量,例如:“亲爱的乘客,您的航类@@FNumber@@日期已从@@OldDate@@更改为@ @新数据@@”。这部分完全没有问题。 还有另一个页面填充模板以将文本作为短信发送给用户,因此用户将选择上一节生成的模板标题,然后我创建动态控件来保存变量值,对于前面的示例:我将创建 3 个输入,以将 @@FNumber@@ 替换为实际/真实航类号,日期也相同,这是我为日期字段创建 DateTimePicker 时的问题,以及当我更改这些动态控件的任何值时,它应该反射(reflect)在预览输入框中,但我的 DateTimePicker 控件有问题。
当页面包含多个 DateTimePicker 并且第一个已更改时。 喜欢这张图片 DateTimePicker images 该函数适用于所有其他 DateTimePicker 示例:
$('.datetimepicker2').on('dp.hide', function () {
alert('hide')
})
此警报出现多次
如果我更改了第二个 DateTimePicker,它会正常工作并且警报仅出现一个
有什么建议吗???
最佳答案
问题
是 $('.datetimepicker2')
动态附加到页面?如果是这样,就是'dp.hide'
为每个创建的事件监听器添加 $('.datetimepicker2')
?如果是这种情况,那么我们以错误的方式绑定(bind)事件监听器。
看看这个带有动态创建按钮的错误示例:
$(document).on('ready', function () {
// functions
function bindButtonClick (i) {
$('button').on('click', function () {
alert('Click listener no ' + i);
});
}
function appendButtons (numButtons) {
var $button,
i;
for (i = 0; i < numButtons; i) {
$button = $('<button>Button' + ++i + '</button>')
.appendTo('.main-container');
bindButtonClick(i);
}
}
// init
appendButtons(3);
});
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- HTML -->
<div class="main-container"></div>
基本上发生的事情是每次我创建 $button
,我正在绑定(bind)一个'click'
事件不属于创建的$button
但是对于创建的按钮以及之前创建的所有 $button,因为我正在使用选择器 'button'
进行绑定(bind),jQuery 正在选择当前 DOM 中的所有按钮,并绑定(bind) 'click'
所有这些的事件监听器。
如果我们在脑海中调试这一点,我们可以理解当我们创建第一个 $button
时,它绑定(bind) 'click'
使用'button'
监听该按钮选择器,然后它创建了第二个 $button
并且再一次绑定(bind) 'click'
新创建的 $button
的监听器和上一个一样,因为使用了选择器 'button'
正在捕获它们,因此第一个 $button 现在有 2 个点击监听器,而第二个 $button 只有 1 个,然后它创建了第三个也是最后一个 $button,并且再一次 绑定(bind)另一个 'click'
新创建的监听器$button
,还有之前的!最后我们得到了第一个 $button
与所有 3 个点击监听器一样,第二个 $button
最后 2 个点击监听器和第三个 $button
与最后一次点击监听器。
我们有几个解决方案可以解决这个问题:
解决方案1
而不是使用 'click'
绑定(bind)点击监听器选择器,我们可以直接将其绑定(bind)到新创建的$button
的引用上:
bindButtonClick($button, i);
还有
function bindButtonClick ($button, i) {
// the click listener is binded directly to the created $button
$button.on('click', function () {
alert('Click listener no ' + i);
});
}
以下是解决方案 1 的工作示例:
$(document).on('ready', function () {
// functions
function bindButtonClick ($button, i) {
/**
* instead of using the general selector $('button'),
* we can use the newly created $button reference
**/
$button.on('click', function () {
alert('Click listener no ' + i);
});
}
function appendButtons (numButtons) {
var $button,
i;
for (i = 0; i < numButtons; i) {
$button = $('<button>Button' + ++i + '</button>')
.appendTo('.main-container');
bindButtonClick($button, i);
}
}
// init
appendButtons(3);
});
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- HTML -->
<div class="main-container"></div>
解决方案2
而不是绑定(bind)'click'
每个人的听众$button
,我们可以在创建按钮之后绑定(bind)所有这些按钮。由于当时所有 3 个按钮都在 DOM 中,因此我们可以使用通用选择器 'button'
将点击监听器绑定(bind)到所有这些:
$(document).on('ready', function () {
// functions
function appendButtons (numButtons) {
var $button,
i;
// create the buttons
for (i = 0; i < numButtons; i) {
$button = $('<button>Button' + ++i + '</button>')
.appendTo('.main-container');
}
// bind the clicks after the buttons creation
$('button').on('click', function () {
alert('Button\'s click listener');
});
}
// init
appendButtons(3);
});
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- HTML -->
<div class="main-container"></div>
关于javascript - 2 个具有相同类问题的日期时间选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45814585/