绑定整个表单不起作用

Question

之前我有一段代码

$(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);
    });*/
});

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

Answer 1

这是因为你的两行代码有冲突

// 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);
});

Answer 2

好的，我根据@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(){});

之下

绑定整个表单不起作用

Bind on entire form is not working

jquery

keyup