2

我正在使用 jquery mobile 和 html5 开发移动应用程序。应用程序的一个部分是一个事件日历，它应该可以通过单击下一个和上一个按钮来遍历月份。

迭代功能没有问题，但是当月份改变时，按钮的内容和功能应该更新以显示新月份的上一个和下一个按钮。

if (month == 11) {
  var next_month = '<input id="next" onclick = "callMonth(' + 0 + ',' + (year + 1) 
    + ');" type="button" data-icon="arrow-r" data-inline="true" value="' 
    + monthNames[0] + ' ' + (year + 1) + '" />';
} else {
  var next_month = '<input id="next" onclick="callMonth(' + (month + 1) + ',' 
    +  year + ');" type="button" data-icon="arrow-r" data-inline="true" value="' 
    + monthNames[month + 1] + ' ' + (year) + '" />';    
}

// previous month
if (month == 0) {
  var prev_month = '<input id="next" onclick = "callMonth(' + 11 + ',' 
    + (year - 1) + ');" type="button" data-icon="arrow-l" data-inline="true" value="'
    + monthNames[11] + ' ' + (year - 1) + '" />';
} else {
  var prev_month = '<input id="next" onclick="callMonth(' + (month - 1) + ',' 
    + year + ');" type="button" data-icon="arrow-l" data-inline="true" value="' 
    + monthNames[month - 1] + ' ' + (year) + '" />';
}

我正在使用onclick输入按钮的参数，因为 jQuery 移动功能$("#next").click()在 if-else-block 内不起作用。同样重要的是要提到函数callMonth(y,m)本身将调用此代码。上面显示的代码是函数calendarWidget()正在调用的函数的一部分callMonth()。所以onclick参数函数触发了再次构建按钮的函数。

现在我的问题是：第一次生成按钮时，它具有应具有的正确样式（jQuery 移动、下一个/上一个图标）。单击按钮时 - 无论是上个月还是下个月 - 下个月或上个月的所有内容都会正确显示。问题是：按钮将其样式重置为浏览器的默认值，这意味着没有 jQuery 移动用户界面，没有图标。如前所述，功能更新没有问题，这意味着可以继续迭代数月。

如何防止更改按钮样式？我应该如何实现按钮的功能（无需重新加载页面？）

我很抱歉我缺乏 jQuery mobile 和英语方面的经验。我找不到任何来源来记录此错误，也许问题出在使用，onclick但无法在 if-else-statement 中定义 click-event-trigger。我很乐意感谢有关如何解决此问题的任何提示、帮助或线索。

提前非常感谢！

4

1 回答 1

0

好吧，因为我的问题没有足够的细节，或者可能因为它太具体了，我找不到一个简单的解决方案，现在我写了一个简单的解决方法来解决这个问题。在进行更改后，我已经尝试.trigger("create")使用这两个按钮进行呼叫，但它不起作用。所以我只是在完成所有更改后添加了一个页面重新加载：

var callMonth = function(m, y) {
    $("#calendar").calendarWidget({month: m, year:y});
     eventData = eventFeedReader.read(function(eventData) {
                evalCalendar(m, y, eventData);
            });
    $('#events').page('destroy').page();
    }

按钮的 onclick 参数仍在调用 callMonth-Function：

<input id="next" onclick="callMonth(' + (month + 1) + ',' 
    +  year + ');" type="button" data-icon="arrow-r" data-inline="true" value="' 
    + monthNames[month + 1] + ' ' + (year) + '" />';

所以这里没有变化。

尽管我预计该命令.page("destroy").page()也会撤消对日历小部件所做的所有更改，但它没有。页面被销毁和重建后，内容和功能都可以正常工作。我不知道为什么无法触发按钮的重新创建，但无论如何 - 现在一切正常。
无论如何，感谢所有试图猜测解决方案的人，并祝那些在遇到类似问题时偶然发现此问题的人好运！

于 2012-10-09T16:25:37.160 回答