forms - 我正在尝试使用 jQuery click 方法设置表单

Question

我正在尝试使用 jQuery click 方法设置表单。对于 html，我不想使用 onClick 而是从 id clickMe 调用以显示名称。它似乎不起作用。这可能吗？如果是这样，我错过了什么？

var getName = function ()
{
if (document.getElementById("FirstName").value == "" || document.getElementById("LastName").value == "")
{
return ("Please enter your first name and last name.");
}

else {var fullName = document.getElementById("FirstName").value + ' ' + document.getElementById("LastName").value;
return fullName;
}
}

var displayName = function () 
{

    $(document).ready(function(){   
    $("#clickMe").click(function(){
        alert(displayName());
    }); 
}); //end ready

}

HTML

<form name="form" id="form" method="post" action="">  

 <p class="FirstName">  
    <label for="FirstName">First Name:</label>
  </p>
    <p>
    <input name="FirstName" type="text" id="FirstName" />  

</p>  

<p class="LastName">  
    <label for="LastName">Last Name:</label></p>
    <p>
    <input name="LastName" type="text" id="LastName" />  

   </p>


<p class="submit">  
    <input name="submitButton" type="button" id="clickMe" value="Display Name" />
  </p>  
 </form> 

Answer 1

请参阅 adcjunior 的答案，以正确分析您现有代码的问题。其实我觉得你的displayName函数在这里是多余的，您可以通过如下更新代码来大大简化事情:

$(document).ready(function() {

    var getName = function () {
        if (document.getElementById("FirstName").value == "" || document.getElementById("LastName").value == "") {
            return ("Please enter your first name and last name.");
        } else {
            var fullName = document.getElementById("FirstName").value + ' ' + document.getElementById("LastName").value;
            return fullName;
        }
    }

    $("#clickMe").click(function(){
        alert(getName());
    }); 
});