Question

我一直在寻找一种使用JQMDateBox选择多个日期的方法，而我当前的解决方案仍有效，但我遇到的事件授权问题似乎无法解决。

申请我已经实现了Datebox的输入框id=date。我正在使用日期框method==set从用户捕获所选日期。然后我使用JTSage SimpleDialog插件进行弹出链接，以收集日期的时间和小时数。

工作流程。当用户点击日期字段时，弹出一个日期框，要求用户选择日期，一旦选择了日期，就会出现另一个弹出框，询问时间和小时（时间和小时）与每个日期相关联。当用户点击Okay时，选择日期，时间和小时将放在显示选择的div下方。然后，用户可以根据需要选择更多日期（时间和小时），这些日期也会添加到div中以供显示和确认。

问题每次用户选择新日期，然后选择时间和小时。相同的日期/时间/小时多次插入我的div。这是一个例子，只需要其中一个。

结果

Date: Dec 31 2014 22:00:00    First Selection
Date: Dec 30 2014 22:10:00    Second Selection
Date: Dec 30 2014 22:10:00    Second Selection
Date: Dec 29 2014 22:20:00    Third Selection
Date: Dec 29 2014 22:20:00    Third Selection
Date: Dec 29 2014 22:20:00    Third Selection

这是我的代码。

HTML

<label  for="caredate">What date do you need care?</label>
<input  data-role="datebox" type="text" id="date" name="caredate" data-options='{"mode":"calbox", "useFocus":true }'>


<div id="inlinecontent" style="display: none;"  data-options='{"mode":"blank","blankContent":true,"blankContentAdopt":true,"headerText":"Time & Hours","headerClose":false}'>   
                <br />
                <label  for="caretime">What time shoud care start?</label>
                <input  data-role="datebox"   type="text"   id="time" name="caretime"   data-options='{"mode":"timeflipbox", "useFocus":true }'>
                <br />
                <label for="hours">Hours Needed?</label>
                <input type="range" name="hours" id="slider-10" data-highlight="true" min="1" max="12" step="1" value="0">
                <br />
                <a rel='close' data-role='button' id="datehrsvalue" href='#'> Save </a>
        </div>

的Javascript

$(document).on('pagebeforeshow', "#reqservice",function () {
$('#date').bind('datebox', function(e, p) {
   if ( p.method === 'set' ) 
       {  
           e.stopImmediatePropagation()
           $('#inlinecontent').simpledialog2();
           $('#datehrsvalue').on("click", function()
                {
                    var ddate = $('#date').datebox('getTheDate');
            //.toString gives Date format, .split dvides the date on each space and return as an array .splice takes the second, third and forth values from the array & .join puts them with spaces and returns them in a format as MM, DD, YYYY
                    var cdate = ddate.toString().split(' ').splice(1,3).join(' ');
                    var dtime = $('#time').datebox('getTheDate');
                    var ctime = dtime.toString().split(' ').splice(4,1).join(' ');
                    $('#confdate').append('Date: ' + cdate + ' ');
                    $('#confdate').append(ctime + '<br/>');
                    $('#date').val('');
                }); 



         }
                 });

});

Answer 1

问题是每次启动日期时间选择器时，都会为“#datehrsvalue”创建一个新的单击事件，因此代码会多次运行。而不是

$('#datehrsvalue').on("click", function()...

在p.method ==='set'中，改为使用 event delegation 在页面上创建处理程序一次：

$(document).on('pagecreate', '#reqservice', function () {
    $(document).on("click", '#datehrsvalue', function(){ ... });
});

事件委托确保即使在pagecreate中不存在DOM元素也会处理点击。

Answer 2

我能够从领先的ezanker解决这个问题，前提是它是一个jquery移动点击事件问题。 click事件多次触发。这是一个很棒的article，讨论了jquery事件触发。我通过在绑定之前取消绑定事件来解决它。

删除了这一行

  $('#datehrsvalue').on("click", function()

替换为

   $(document).off('click', '#datehrsvalue').on('click', '#datehrsvalue',function(e) {

JQM Click事件委派：Datepicker的多个结果与JQM Datebox＆amp; SimpleDialog

2 个答案: