JQM Click Event Delegate： Date picker with JQM Datebox & SimpleDialog 的多个结果

Question

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

应用程序我有一个输入框id=date，其中实施了日期框。我正在使用日期框method==set从用户那里捕获所选日期。然后我使用 JTSage SimpleDialog 插件进行弹出链接，以收集日期的时间和小时数。

工作流。当用户单击日期字段时，会弹出一个日期框，要求用户选择日期，一旦选择了日期，就会出现另一个弹出框，询问时间和小时(时间和小时(与每个日期相关联。当用户单击"确定"时，选择日期、时间和小时将放在下面的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>

爪哇语

$(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' 中，改用事件委托在页面创建后创建处理程序：

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

事件委托确保即使 DOM 元素在页面创建时不存在，也会处理单击。

Answer 2

我能够从潜在客户那里解决这个问题，前提是这是一个jquery移动点击事件问题。单击事件多次触发。这是一篇很棒的文章，讨论了jquery事件触发。我通过在绑定事件之前取消绑定事件来解决它。

删除了此行

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

替换为

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