Javascript onclick JS在ie8/9问题中未执行

我有一句话：

<input class='submit_img' type="image" onclick='ax_update_mood();' src="/images/rainbow/gobuttonbluesmall.png" value="Submit" alt="Submit"></td>

…然后我有一个JavaScript：

function js_alert() {
    alert('TEST ALERT');
}

function ax_update_mood() {
    var str_mood_desc = $('#moodmeter_form_mood_desc').val();
    var str_mood_color = $('#moodmeter_form_mood_color').val();

    if (str_mood_desc.length < 3 || str_mood_desc.length > 32) {
        alert('Mood Description must be between 3 - 32 characters long.');
        return
    }

    if (str_mood_color.length < 1 || str_mood_color.length > 32) {
        alert('Mood Color must be between 3 - 32 characters long.');
        return
    }

    $.ajax({
        type: "POST",
        url: "moodupdate",
        data: "mood_desc=" + str_mood_desc + "&mood_color=" + str_mood_color,
        success: function (msg) {
            ax_get_mood();
            alert("Mood Updated ");
        }
    })
}

函数js_alert（）{
警报（“测试警报”）；
}
函数ax_update_mood（）{
var str_mood_desc=$（“#moodmeter_form_mood_desc”）.val（）；
var str_mood_color=$（'moodmeter_form_mood_color'）.val（）；
如果（str|u-mood_-desc.length<3 | str|u-mood_-desc.length>32）{
警报（'情绪描述必须在3-32个字符之间'）；
返回
}
如果（str|u mood_color.length<1 | | str|u mood_color.length>32）{
警报（'语气颜色必须在3-32个字符之间'）；
返回
}
$.ajax({
类型：“POST”，
网址：“moodupdate”，
数据：“mood_desc=“+str_mood_desc+”&mood_color=“+str_mood_color，
成功：功能（msg）{
你的心情如何；
警惕（“情绪更新”）；
}
})
}

当我点击“提交”时，我的JavaScript不会执行

谁能解释一下吗

---

谢谢

如果您为

ax\u update\u mood

引用的代码在全局范围内（不包含在另一个函数中），我看不出它不运行的任何原因。不过，它可能不会产生您想要的效果，因为当验证失败时，您无法阻止表单的提交。为此，您必须将

onclick

部分更改为：

onclick='return ax_update_mood();'

…您必须

返回false当您要取消表单提交时

另外，因为您使用ajax调用来完成工作，所以希望
返回false即使验证成功。否则，表单将被提交，ajax调用将永远不会发生

这样做的最佳选择是使用内置调试器（“F12开发工具”），启用调试，在
ax\u update\u mood
的第一行设置断点，然后遍历代码，看看哪里出了问题

为了说明我关于它是全局显式的观点，您编写的代码必须在页面级范围内：

<script>
function ax_update_mood() {
    // ...
}
</script>

…然后将我的所有代码放在jQuery
ready
回调中（这样我就不会创建全局函数或变量；全局范围已经足够拥挤）：

jQuery（函数（$）{
//钩住图像按钮上的click事件
$（“#btnsupmit”）。单击（ax#u update_mood）；
函数js_alert（）{
警报（“测试警报”）；
}
函数ax_update_mood（）{
var str_mood_desc=$（“#moodmeter_form_mood_desc”）.val（）；
var str_mood_color=$（'moodmeter_form_mood_color'）.val（）；
如果（str|u-mood_-desc.length<3 | str|u-mood_-desc.length>32）{
警报（'情绪描述必须在3-32个字符之间'）；
返回false；
}
如果（str|u mood_color.length<1 | | str|u mood_color.length>32）{
警报（'语气颜色必须在3-32个字符之间'）；
返回false；
}
$.ajax({
类型：“POST”，
网址：“moodupdate”，
数据：“mood_desc=“+str_mood_desc+”&mood_color=“+str_mood_color，
成功：功能（msg）{
你的心情如何；
警惕（“情绪更新”）；
}
});
return false；//即使验证成功，我们也不希望表单提交
}
});


有些离题：一些杂项注释：


在许多地方，你依赖的是自动插入分号的恐怖。始终确保用分号终止您的语句，永远不要依赖JavaScript解释器来充分理解您的意思，以便为您做到这一点。我已经在上面的最后一个例子中修复了它们
由于您显然在使用jQuery，因此我建议将验证与DOM加载上的jQuery连接起来，而不是使用过时的
onclick
属性。在上面的最后一个例子中，我也展示了如何做到这一点
您是否将IE配置为在脚本错误时提醒您？如果这在FFX或Chrome而不是IE中起作用，那么您可能希望为所有客户端脚本启用错误，并查看瓶颈在哪里。您可以在工具-->Internet选项-->高级中找到脚本通知设置，滚动到浏览标题并选中“显示关于每个脚本错误的通知”。您还需要启用脚本调试，这是非常接近脚本错误通知的复选框之一

在IE中跟踪问题的另一个方法是插入调试器语句。只需更新ax_update_mood（），使第一行是单词“debugger”：

然后使用IE逐步完成这个方法，看看你的失败在哪里

我能看到的另一件事是，在.ajax（）调用之后可能需要一个分号。我注意到IE8将被object/jquery符号阻塞，其中分号不会终止声明

任何额外的故障排除帮助都需要更多关于如何引用JQuery、页面其余部分的外观等的详细信息

快乐编码

B
开发者工具控制台有任何错误吗？我的js在一个单独的rainbow.js文件中。我现在做的是按照你的建议将javascript代码放在我的.php文件中，但当我单击go/submit按钮时，仍然没有发生任何事情？？
<script>
jQuery(function($) {
    function ax_update_mood() {
        // ...
    }
});
</script>

<input class='submit_img' type="image" id="btnSubmit" src="/images/rainbow/gobuttonbluesmall.png" value="Submit" alt="Submit"></td>

jQuery(function($) {

    // Hook the click event on the image button
    $("#btnSubmit").click(ax_update_mood);

    function js_alert() {
        alert('TEST ALERT');
    }

    function ax_update_mood() {
        var str_mood_desc = $('#moodmeter_form_mood_desc').val();
        var str_mood_color = $('#moodmeter_form_mood_color').val();

        if (str_mood_desc.length < 3 || str_mood_desc.length > 32) {
            alert('Mood Description must be between 3 - 32 characters long.');
            return false;
        }

        if (str_mood_color.length < 1 || str_mood_color.length > 32) {
            alert('Mood Color must be between 3 - 32 characters long.');
            return false;
        }

        $.ajax({
            type: "POST",
            url: "moodupdate",
            data: "mood_desc=" + str_mood_desc + "&mood_color=" + str_mood_color,
            success: function (msg) {
                ax_get_mood();
                alert("Mood Updated ");
            }
        });

        return false; // Even on successful validation, we don't want the form to submit
    }
});

    function ax_update_mood() {  

        debugger;

        var  str_mood_desc = $('#moodmeter_form_mood_desc').val();  
        var  str_mood_color = $('#moodmeter_form_mood_color').val();   

        // ... the rest of your code 
    }