需要一些解决办法。 jquery 中的点击事件中未调用 Javascript 函数

Question

我试图从我的 javascript 代码调用名为 isUrgencyTypeValid 的函数，但它不起作用。请检查我的代码有什么问题。 应显示未显示的警报

我的 javascript 函数未被调用。

HTML代码

       <td colspan="2" align="center"><input id="btnSubmit" type="submit" value="submit" runat="server"/></td></tr>

jQuery调用函数

        $("#btnSubmit").bind("click",function(){
        alert(); // this is running
        isUrgencyTypeValid();

        });

javascript实现的函数

function isUrgencyTypeValid()
    {
        alert("asd");
        var i=0;
        for(i=0;i<$("radio[name='urgencyType']").length;i++)
            {
            if($("radio[name='urgencyType']")[i].checked)
                {
                alert($("radio[name='urgencyType']")[i].value);                 
                return true;
            }           
        return false;
    }   

关于我的表单的更多描述在这里

<form runat="server" name="myPage">
    <table style="width: 100%;" cellpadding="5" cellspacing="5">
        <caption>
            Computer Support / Service Request
        </caption>
        <tr><td>First Name</td>
            <td><input id="txtFirstName" type="text" value="First Name" runat="server"/><span class="error"></span></td></tr>

        <tr>
            <td>Last Name</td>
            <td><input id="txtLastName" type="text" value="Last Name" runat="server"/><span class="error"></span></td></tr>

        <tr>
            <td>Email Address</td>
            <td><input id="txtEmailAddress" type="text" value="Email Address" runat="server"/><span class="error"></span></td></tr>    

        <tr>
            <td>Phone No</td>
            <td><input id="txtPhoneNo" type="text" value="Phone No" runat="server" /><span class="error"></span></td></tr>

        <tr>
            <td>Do you have text messaging</td>
            <td>
                <span>Yes</span><input id="rdoYes" value="Yes" type="radio" runat="server"/>
                <span>No</span><input id="rdoNo" value="No" type="radio" runat="server"/><span class="error"></span>
            </td></tr>

        <tr>
            <td>Description of request*: </td>
            <td><textarea id="txtDescription" cols="50" rows="10" runat="server"></textarea><span class="error"></span><span id="lengthCount"></span></td></tr>

        <tr>
            <td>Urgency of this support request:</td>
            <td>
                <input id="rdoAnyTime" name="urgencyType" value="Anytime" type="radio" runat="server"/><span>Anytime</span><br />
                <input id="rdoCplDays" name="urgencyType" value="In the next couple of days" type="radio" runat="server"/><span>In the next couple of days</span><br />
                <input id="rdoToday" name="urgencyType" value="Today" type="radio" runat="server"/><span>Today</span><br />
                <input id="rdoUrgent" name="urgencyType" value="This is extremely urgent...I cannot wait!" type="radio" runat="server"/><span>This is extremely urgent...I cannot wait!</span><br />
                <input id="rdoTalkSometime" name="urgencyType" value="Please contact me and we'll talk about it" type="radio" runat="server"/><span>Please contact me and we'll talk about it</span><br /><span class="error"></span>
            </td></tr>

        <tr>
            <td colspan="2" align="center">Captcha To Be implemented.</td></tr>

        <tr>
            <td></td>
            <td><input id="chkRequestCopy" type="checkbox" runat="server"/>Please send me a copy of this service request</td></tr>

        <tr>
            <td colspan="2" align="center"><input id="btnSubmit" type="submit" value="submit" runat="server"/></td></tr>

    </table>    
</form>   

Answer 1

我复制了你的代码并遇到了同样的问题。然后我仔细观察，发现 isUrgencyTypeValid() 函数中缺少右括号。 for 循环的右括号丢失。 Firefox 错误控制台也会显示这一点。

添加括号后，警报就正常工作了。

function isUrgencyTypeValid()
{
    alert("asd");
    var i=0;
    for(i=0;i<$("radio[name='urgencyType']").length;i++)
        {
        if($("radio[name='urgencyType']")[i].checked)
        {
            alert($("radio[name='urgencyType']")[i].value);                 
            return true;
        }  
    } //this was missing
    return false;
}   

Answer 2

您的radio选择器不正确。

不存在 radio 元素，但是有一个 :radio 伪类选择器。

您的代码应为：

function isUrgencyTypeValid()
{
    alert("asd");
    var i=0;
    for(i=0;i<$("input[name='urgencyType']:radio").length;i++)
        {
        if($("input[name='urgencyType']:radio")[i].checked)
            {
            alert($("input[name='urgencyType']:radio")[i].value);                 
            return true;
        }           
    return false;
}

** 编辑 **

除了上述更改之外，由于 alert 从未发生，这表明 isUrgencyTypeValid 未被调用。

最可能的解释是，在将处理程序绑定到按钮的 click 事件之前，您没有等到 DOM 加载。您应该在某个地方有一些如下所示的代码：

$(function()
{
    /*
     * ... other code ...
     */

    $("#btnSubmit").bind("click",function(){
        isUrgencyTypeValid();
    });

    /*
     * ... other code ...
     */
}