javascript - 不稳定的 innerHTML 行为。文字消失

Question

我正在尝试更新 <p>使用 jquery 标记，但是，当我单击“提交”按钮时，我使用 innerHTML 插入的文本很快就会消失。除非我使用 Firefox，在这种情况下它似乎可以工作 - 如果 - 我插入警告框。这听起来像是某种时间问题。但我不太确定它是什么或如何修复它。有谁知道问题出在哪里？

在此先感谢您的所有帮助!

$(document).ready(function(){
     $('#addCourse').live("submit", function(){
        //alert("Submit Function.  hours = "+$('#hours').val());
        document.getElementById('hrs_planned').innerHTML = 'HOURS = '+INIT_PLANNED_HRS+2;//($('#hours').val())+' GPA';
     });                
     document.getElementById('hrs_planned').innerHTML = 'HOURS!! = '+INIT_PLANNED_HRS+' GPA';
});

和html

<li><h3>Planned Courses</h3><p id = "hrs_planned"> gpa </p></li>

Answer 1

尝试返回false；

如果您使用 jQuery 1.7，也可以使用 on() 而不是 live()，因为 live() 已被弃用。参见 documentation了解详情。
如果您使用的是 jQuery 1.6.x 或更早版本，请改用 delegate()。

$(document).ready(function() {
    $('#addCourse').on("submit", function(e) {
        //alert("Submit Function.  hours = "+$('#hours').val());
        document.getElementById('hrs_planned').innerHTML = 'HOURS = ' + INIT_PLANNED_HRS + 2; //($('#hours').val())+' GPA';
        return false;
    });
    document.getElementById('hrs_planned').innerHTML = 'HOURS!! = ' + INIT_PLANNED_HRS + ' GPA';
});​

..或者如果失败，您可以尝试使用 e.preventDefault 和 e.stopPropagation。

$(document).ready(function() {
    $('#addCourse').on("submit", function(e) {
        // prevent default submit behaviour
        e.preventDefault;
        //alert("Submit Function.  hours = "+$('#hours').val());
        document.getElementById('hrs_planned').innerHTML = 'HOURS = ' + INIT_PLANNED_HRS + 2; //($('#hours').val())+' GPA';

        // prevent event from bubbling up
        e.stopPropagation;
    });
    document.getElementById('hrs_planned').innerHTML = 'HOURS!! = ' + INIT_PLANNED_HRS + ' GPA';
});​