javascript - 单击时 JQuery 移动按钮样式更改

Question

我正在使用 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 Mobile、下一个/上一个图标)。单击按钮时 - 无论是上个月还是下个月 - 都会正确显示下个月或上个月的所有内容。问题是:按钮将其样式重置为浏览器的默认样式，这意味着没有 jQuery Mobile UI，没有图标。如前所述，功能更新没有任何问题，这意味着可以在几个月内继续迭代。

如何防止按钮样式发生变化？我应该如何实现按钮的功能(无需重新加载页面？)

很抱歉我缺乏 jQuery Mobile 和英语方面的经验。我找不到任何来源来记录此错误，问题可能出在 onclick 的使用上，但无法在 if-else-statement 中定义 click-event-trigger。对于如何解决此问题的任何提示、帮助或线索，我将不胜感激。

提前致谢!

Answer 1

因为我的问题没有足够的细节或者可能是因为它太具体了，我找不到一个简单的解决方案，现在我已经写了一个简单的解决方法来解决这个问题。在进行更改后，我已经尝试使用这两个按钮调用 .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() 也会撤消对日历小部件所做的所有更改，但它没有。页面被销毁并重建后，内容和功能运行良好。我不知道为什么无法触发按钮的重新创建，但无论如何 - 现在一切正常。
无论如何，感谢所有试图猜测解决方案的人，并祝那些在遇到类似问题时偶然发现这个问题的人好运!