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

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

我很抱歉我缺乏jQuery mobile和英语的经验。我找不到任何来源来记录这个错误，也许问题是使用onclick但是不可能在if-else语句中定义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();
    }

callMonth-Function仍然被按钮的onclick-parameter调用：

<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()也会撤消对日历小部件所做的所有更改，但事实并非如此。页面被销毁和重建后，内容和功能正常运行。我不知道为什么不可能触发按钮的重新设计，但无论如何 - 现在一切正常无论如何，感谢所有试图猜测解决方案的人，以及那些在遇到类似问题时遇到这种情况的人的好运！

点击时JQuery移动按钮样式发生变化

1 个答案: