绑定整个表单不起作用

时间:2015-01-20 06:19:36

标签: jquery keyup

以前我有一段代码

$(document).bind('keyup', function(e) 
{
    if (e.keyCode === 13 && $('#domain_name_url').is(':focus')) 
    {
        alert("hii");
        $("#submit_replace_button").click();
    }
    else if(e.keyCode === 13 && $('#search_domain').is(':focus'))   
    {   
        //$("#submit_search_button").click();
    }
});

曾经工作过。

现在我做了一个简单的更改,因为我想只在keyup事件在表单元素中时才能使用。

所以我把它改成了

$("#m_domain input[type=text]").on('keyup', function(e) 
{
    if (e.keyCode === 13 && $('#domain_name_url').is(':focus')) 
    {
        alert("hii");
        $("#submit_replace_button").click();
    }
    else if(e.keyCode === 13 && $('#search_domain').is(':focus'))   
    {   
        //$("#submit_search_button").click();
    }
});

现在它似乎无法正常工作。我做错了什么?

这是我的总html

<form action="domains.php#searchdomain" method="post" name="m_domain" id="m_domain"
      onsubmit = "return primalValidate()">
      <a name="searchdomain"></a>
        <table class="dataTable" width="100%" border="0" cellspacing="0" cellpadding="5" id="" style="text-align:center; margin-top:0px; border-left:1px solid #ddd; border-right:1px solid #ddd; border-top:1px solid #ddd;">
          <tr>
            <td align="left" colspan="2"><div id="display_message" <?php echo $sstyle; ?>><?php echo $dis_msg; ?></div></td>
          </tr>
          <tr>
            <td align="left">Search Domain</td>
            <td align="left" style="display:none;" id="apply_text">Replace Selected Domains With</td>
          </tr>

          <tr>
            <td align="center">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td><input class="input_field" name="search_domain" id="search_domain" value="<?php echo $search_domain; ?>" type="text"></td>
                  <td>&nbsp;</td>
                  <td><input type="submit" class="btn blue_button" 
                    name="submit_domain_form" id="submit_search_button"
                  value="Search"/></td>
                </tr>
              </table>
            </td>
            <td align="center">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" id="apply_button" style="display:none;">
                <tr>
                  <td><input class="input_field" name="domain_name_url" id="domain_name_url" value="<?php echo $domain_name_url; ?>" type="text"></td>
                  <td>&nbsp;
                  <input name="domain_replace_id" id="domain_replace_id" 
                  value="" type="hidden">
                  <input name="domain_replace_link" id="domain_replace_link" 
                  value="" type="hidden">
                  </td>
                  <td><input type="submit" class="btn blue_button" 
                    name="submit_domain_form" id="submit_replace_button"
                  value="Apply"/></td>
                </tr>
              </table>
              </td>
              <td align="center">
                <input type="hidden" name="submit" value="Apply"/>
              </td>
          </tr>
          <tr>
            <td align="center">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td><input type="checkbox" name="status_domain" id="status_domain" <?php if($status_domain){?> checked <?php } ?>>&nbsp;Include inactive campaigns in search.</td>
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                    </tr>
                </table>
            </td>
            <td align="center">&nbsp;</td>
          </tr>

        </table>
        <?php
        echo '<div style="border-bottom:1px solid #ddd; border-left:1px solid #ddd; border-right:1px solid #ddd;  width:100%; padding:10px;">';
        if(sizeof($request_list) > 0)
        {
        echo ' 
        <div class="pg_wrapper">
        <div class="progress" style="width:80%;float: left;position: relative; top: 0; z-index: 999; display: none;"><div class="progress-bar" role="progressbar" aria-valuenow="60"   aria-valuemin="0" aria-valuemax="100" ></div></div><div id="cancel_load" style="float: left; height: 23px; font-size: 12px; vertical-align:middle; padding-left: 5px; display: none;"><a style="color:#428bca;" href="javascript:void(0);" ><strong>Cancel</strong></a>
        </div>
        <div class="clearfix"></div>
        </div>
        ';
        }
        echo '</div>';
        ?>
        <div id="lp_pages_table" style="padding: 10px; border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;">
            <table class="display compact" width="100%" border="0" cellspacing="0" cellpadding="5" id="domains_list" style="margin-top:0px; border:1px solid #ddd;">
                <thead>
                    <tr>
                    <th style="text-align:center;"><input type="checkbox" name="chk_all" class="checkall" id="checkedAll"></th>
                    <th>URL</th>
                    <th>Type</th>
                    <th>ID</th>
                    <th>Campaign</th>
                    <th>Status</th>
                    </tr>
                </thead>
            </table>

        </div>
        </form>

这是我的JavaScript代码总数。

$("#m_domain input[type=text]").on('keyup', function(e) 
{
    if (e.keyCode === 13 && $('#domain_name_url').is(':focus')) 
    {
        alert("hii");
        $("#submit_replace_button").click();
    }
    else if(e.keyCode === 13 && $('#search_domain').is(':focus'))   
    {   
        //$("#submit_search_button").click();
    }
});

$(document).ready(function()
{
    $("#domains_list tbody").on( "click", "tr", function () 
        {
            var total_selected_row;
            var total_row;
            $(this).toggleClass("selected");
            var final_class = $(this).attr("class");
            var chk_ob = $(this).find("td:first").find("input");

            if (final_class.indexOf("selected")>0) 
            {
                $(chk_ob).prop('checked', true);
                total_selected_row = t.rows('.selected').data().length;
                total_row = t.rows().data().length;
                if(total_selected_row == total_row)
                {
                    $("#checkedAll").prop('checked', true);
                }
            } 
            else 
            {
                $(chk_ob).prop('checked', false);
                $("#checkedAll").prop('checked', false);
            }
        } );

    /* If I comment the below on focus methods, then the total scripts work with keyup method on form.
       If I uncomment the below focus methods, then keyup method on form doesn't work, instead it works on `$(document).bind();`
    /*

    $('#domain_name_url').on('focus',function()
    {
        $('#submit_search_button').prop("disabled",true);
        $('#submit_replace_button').prop("disabled",false);
    }); 
    $('#search_domain').on('focus',function()
    {
        $('#submit_replace_button').prop("disabled",true);
        $('#submit_search_button').prop("disabled",false);
    });*/
});

但我需要将此提交按钮启用禁用代码。

2 个答案:

答案 0 :(得分:1)

这是因为您的2行代码存在冲突

// in the below code you want click event when your domain_name_url
// is focused which will run immediately after focus event
if (e.keyCode === 13 && $('#domain_name_url').is(':focus')) 
{
    alert("hii");
    $("#submit_replace_button").click();
}

当您在#domain_name_url上绑定焦点事件时,它将禁用该按钮。而且您无法点击禁用按钮

$('#domain_name_url').on('focus',function()
{
    $('#submit_search_button').prop("disabled",true);
    $('#submit_replace_button').prop("disabled",false);
}); 

答案 1 :(得分:0)

好吧,我找到了基于@RohanKuman的答案

我需要放置这样的代码,

$(document).ready(function()
{
    $("#domains_list tbody").on( "click", "tr", function () 
        {
            var total_selected_row;
            var total_row;
            $(this).toggleClass("selected");
            var final_class = $(this).attr("class");
            var chk_ob = $(this).find("td:first").find("input");

            if (final_class.indexOf("selected")>0) 
            {
                $(chk_ob).prop('checked', true);
                total_selected_row = t.rows('.selected').data().length;
                total_row = t.rows().data().length;
                if(total_selected_row == total_row)
                {
                    $("#checkedAll").prop('checked', true);
                }
            } 
            else 
            {
                $(chk_ob).prop('checked', false);
                $("#checkedAll").prop('checked', false);
            }
        } );

        /*there are two submit buttons in a single form.
        When we press enter, the first submit button submits the form as it works
        as a default submit button .
        So, we need to place this piece of code to check, which textbox had the focus
        when the enter was clicked. If its search textbox, then by default action, submit button1 will act, but if its replace textbox, so submit button 2 is being made clicked.*/ 
    $("#m_domain input[type=text]").on('keyup', function(e) 
    {
        if (e.keyCode === 13 && $('#domain_name_url').is(':focus')) 
        {
            $("#submit_replace_button").click();
        }
        else if(e.keyCode === 13 && $('#search_domain').is(':focus'))   
        {   

        }
    });
    $('#domain_name_url').on('focus',function()
    {
        $('#submit_search_button').prop("disabled",true);
        $('#submit_replace_button').prop("disabled",false);
    }); 
    $('#search_domain').on('focus',function()
    {
        $('#submit_replace_button').prop("disabled",true);
        $('#submit_search_button').prop("disabled",false);
    });
});

我是愚蠢的,并没有明白

$("#m_domain input[type=text]").on('keyup', function(e){});

$('#domain_name_url').on('focus',function()
    {
        $('#submit_search_button').prop("disabled",true);
        $('#submit_replace_button').prop("disabled",false);
    }); 
    $('#search_domain').on('focus',function()
    {
        $('#submit_replace_button').prop("disabled",true);
        $('#submit_search_button').prop("disabled",false);
    });

两者都应在$(document).ready(function(){});

之下