JQM单击事件委托:使用JQM和SimpleDialog实现数据交换的多个结果

Question

我正在寻找一种使用JQMDateBox选择多个日期的方法，而我的当前解决方案可以工作，但我在事件委托方面有一个问题，似乎无法修复。

我的应用程序有一个带有Datebox实现的输入框id=date。我正在使用datebox method==set从用户那里捕获所选的日期。然后，我使用JTSage SimpleDialog插件弹出链接，收集时间和时间的日期。

工作流程。当用户单击日期字段时，会弹出一个日期框，要求用户选择日期，一旦选定日期，将出现另一个弹出框，要求每个日期关联时间和小时(时间和小时)。当用户单击“on”时，选择日期、时间和时间放在下面显示所选内容的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

这是我的密码。

<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‘中，使用http://learn.jquery.com/events/event-delegation/在页面创建时创建处理程序：

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

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

Answer 2

我能够从lead中解决这个问题，前提是它是jquery移动单击事件问题。单击事件多次触发。这里有一个很棒的文章，它讨论jquery事件触发。我通过在事件绑定之前解除绑定来解决这个问题。

移除这一行

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

替换成

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