Question

这可能太简单了，但我不明白为什么这个提交按钮不起作用 - 两次尝试都没有提醒。总新手在这里。我需要添加更多的搜索字段，比如zip，所以我需要让它工作，其他的眼睛会有所帮助，非常感激：

    <html xmlns="//www.w3.org/1999/xhtml "> 
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Rent Properties</title>

    <link rel="stylesheet" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

    <style type="text/css">
    #searchFields
    {
       background-color:silver;
       padding:6px;       
       height: 30px;
       width: 300px;
       position: fixed;
       z-index: 1;
       left: 0%;
       top: 0%;
       margin: 0px 0 0 0px;         
    }
#Properties
{
//background-color:#f0f0f0; 
//height: 60px;
width: 100%;
position: fixed;
z-index: 1;  
left: 0%;
text-align: center;
top: 60px;
margin: 0px 0 0 0px;   
}   
 </style>

 </head>
        <body>
      <form id='rentProp' name="rentProp" >
       <p><br><br><br><font style="font-size:3em;z-index: 1000">&nbsp;&nbsp;<i>Loading ...</i></font><br><br></p>
        <div id='searchFields'></div>
        <div id='Properties'></div>
       </form>
    </body>
<script type="text/javascript">
  var zip="";
       $(document).ready(function () {
        jQuery.support.cors = true;

        output = "<table><tr><td>Zip: <input type='text' name='zipcd' id='zipcode'>  <input type='submit' value='Go' name='searchButton' class='button' id='searchButton' /><br></td></tr></table><BR>";
    //Get Search Zip entered on submit
    $('#searchButton').on('click', '#searchButton', function(){
        zip = document.getElementById('zipcode').value;
        zip = $('#zipcode').val();  // tried zip= one at a time and also tried this one line outside of the function
        alert(zip);  // works but zip = "" outside of this function
    });
        $('#searchFields').html(output);
   $(document).ready(function () {
        if (zip == "") { fnd = 0; }
        else { fnd = zipcode.search(zip); }
        // much more code here including more html output
   });

</script>
</html>

Answer 1

jQuery只在标签下编写。

<script type="text/javascript">
 $(document).ready(function () {
    jQuery.support.cors = true;

//Get Search Zip entered on submit
$('#searchButton').on('click',function(){
    zip = document.getElementById('zipcode').value;
    alert(zip);
});
$('.searchButton').on('click', function () {
    zip = document.getElementById('zipcode').value;
    alert('zip:' + zip);
}); 

 output = "<table><tr><td>Zip: <input type='text' name='zipcd' id='zipcode'>  <input type='submit' value='Go' name='searchButton' class='button' id='searchButton' /><br></td></tr></table><BR>";
    $('#searchFields').html(output);
</script>

Answer 2

当您尝试将点击处理程序附加到#searchButton时，它确实不存在。你所要做的就是改变：

$('#searchButton').on('click', function() { ...

要

$('#searchFields').on('click', '#searchButton', function() { ...

有关详情，请查看documentation

jquery提交按钮不起作用

2 个答案: