jQuery $ .ajax只能在$ .click中首次点击

Question

所以继承我的问题。在我的代码的第一次火上它工作完美但我使用javascript重新加载提交按钮（而不是刷新页面）。所有与ajax无关的东西在第二次点击时运行正常，但我不能在我的生活中让ajax在下次点击按钮时运行。

这是我的代码：

$("#edit_company_basic").live('click', function()
    {
        //get current value of button
        var btnText = $("#submit_company_update").val();

//on click the button becomes disabled and value changes to Please Wait
        $("#submit_company_update").attr("disabled", true);
        $("#submit_company_update").attr("value", "Please wait");

//this one add a loader gif and a updating company message
        $('#button_container').append("<div id='update'><center><img id='loading' src='images/icons/ajax-loader (1).gif' />&nbsp;<font color='red'>Updating company</font></center></div>");


//These variables are used for the ajax datastring
        var name = $("#company_name").val();
        var bio = $("#company_bio").val();
        var forum_url = $("#forum_url").val();
        var collection = $("#collection :selected").text();
        var fuel = $("#fuel :selected").text();
        var repair = $("#repair :selected").text();
        var tickets = $("#tickets :selected").text();
        var dataString = 'company_name='+ name + '&bio=' + bio + '&forum=' + forum_url + '&collection=' + collection + '&repair=' + repair + '&fuel=' + fuel + '&ticket=' + tickets;  
        $.ajax({  
            type: "POST",  
            url: "library/update_company.php",  
            data: dataString,  
            success: function() 
            {  

//On success I give the loader a little more time before anything happens I then re-enable the button allowing the user to be able to click it and give them a message that the copmany has been successfully updated.
            setTimeout(function(){$("#submit_company_update").attr("value", btnText); $("#submit_company_update").removeAttr('disabled'); $("#update").html("<center><font color='green'>Company has been updated</font></center>"); }, 1550);

//Here I just give the company updated message a few seconds before I remove it.
                setTimeout(function(){$("#update").fadeOut(1000); }, 2200);
            }
        });  

    });

这是我的所有jscript

中涉及的html

<tr>
            <td colspan="2" id="submit_form"><div id="button_container"><center><input type="submit" name="submit_company_update" id="submit_company_update" value="Edit Company" /></center></div></td>
        </tr>

有没有人有任何想法如何重新启用按钮后再次运行ajax？一旦我重新启用按钮再次点击它将不会运行ajax。

提前致谢，

Jefffan24

更新

所以这是我在该页面上的整个javascript代码：

<script type="text/javascript">
$(document).ready(function(){
//$("#warning_price").hide();
$(".toggle_container").hide(); 

//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
$("#company_name").click(function(){
    $(".toggle_container").toggleClass("active").slideDown("normal");
});
$("#company_name").blur(function(){
    $(".toggle_container").slideUp('normal');
});

//This displays a warning message if they don't have permission to this part of the site.
$("#noperm").html('<div class="ui-widget" style="width:650px; margin:0 auto;"><div class="ui-state-highlight ui-corner-all" style="padding: 0 .7em;"><p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em; margin-top:3px;"></span><strong>Error:</strong><br /> That was a heck of try but you do not have permission to access this area.</p></div></div> ');


//This is a jQuery character count plugin, just setting options and what not
var options2 = {
'maxCharacterSize': 450,
'textFontSize': '12px',
'textColor': '#000000',
'warningColor': '#FF0000',
'originalStyle': 'originalDisplayInfo',
'warningStyle': 'warningDisplayInfo',
'warningNumber': 100,
'displayFormat': '#input Characters | #left Characters Left | #words Words'
};
var options1 = {
'maxCharacterSize': 255,
'textFontSize': '12px',
'textColor': '#000000',
'warningColor': '#FF0000',
'originalStyle': 'originalDisplayInfo',
'warningStyle': 'warningDisplayInfo',
'warningNumber': 40,
'displayFormat': '#input Characters | #left Characters Left | #words Words'
};
$('#company_bio').textareaCount(options2);
$('#company_name').textareaCount(options1);
$('#forum_url').textareaCount(options1);
//End the counter


//Create Select Boxes (using for loops to make 1-50, 1-90, and 1-90 as options
var minimum = 1;
var max_col = 50;
var max_assist = 90;
var i = 1;
var def_collection = <?php echo $collection; ?>;
var def_repair = <?php echo $repair; ?>;
var def_fuel = <?php echo $fuel; ?>;
var def_tickets = <?php echo $ticket; ?>;
//Select boxes for Collection
$("#tdCollection").append("<select id='collection' name='collection'>");



for(i = 1;i <= max_col; i++){
    if(i == def_collection){
        $("#collection").append("<option selected='selected'>" + i + "</option>");
    }
    else {
        $("#collection").append("<option>" + i + "</option>");
    }
}
$("#tdCollection").append("</select>%");

//Select boxes for Repair
$("#tdRepair").append("<select id='repair' name='repair'>");
for(i = 1;i <= max_col; i++){
    if(i == def_repair){
        $("#repair").append("<option selected='selected'>" + i + "</option>");
    }
    else {
        $("#repair").append("<option>" + i + "</option>");
    }
}
$("#tdRepair").append("</select>%");

//Select boxes for Fuel
$("#tdFuel").append("<select id='fuel' name='fuel'>");
for(i = 1;i <= max_col; i++){
    if(i == def_fuel){
        $("#fuel").append("<option selected='selected'>" + i + "</option>");
    }
    else {
        $("#fuel").append("<option>" + i + "</option>");
    }
}
$("#tdFuel").append("</select>%");

//Select boxes for tickets
$("#tdTickets").append("<select id='tickets' name='tickets'>");
for(i = 1;i <= max_col; i++){
    if(i == def_tickets){
        $("#tickets").append("<option selected='selected'>" + i + "</option>");
    }
    else {
        $("#tickets").append("<option>" + i + "</option>");
    }
}
$("#tdTickets").append("</select>%");

//End the select box code.

//On form submit!
$("#edit_company_basic").live('click', function()
{

    var btnText = $("#submit_company_update").val();
    $("#submit_company_update").attr("disabled", true);
    $("#submit_company_update").attr("value", "Please wait");
    $('#button_container').append("<div id='update'><center><img id='loading' src='images/icons/ajax-loader (1).gif' />&nbsp;<font color='red'>Updating company</font></center></div>");
    var name = $("#company_name").val();
    var bio = $("#company_bio").val();
    var forum_url = $("#forum_url").val();
    var collection = $("#collection :selected").text();
    var fuel = $("#fuel :selected").text();
    var repair = $("#repair :selected").text();
    var tickets = $("#tickets :selected").text();
    var dataString = 'company_name='+ name + '&bio=' + bio + '&forum=' + forum_url + '&collection=' + collection + '&repair=' + repair + '&fuel=' + fuel + '&ticket=' + tickets;  
    $.ajax({  
        type: "POST",  
        url: "library/update_company.php",  
        data: dataString,  
        success: function() 
        {  
            setTimeout(function(){$("#submit_company_update").attr("value", btnText); $("#submit_company_update").removeAttr('disabled'); $("#update").html("<center><font color='green'>Company has been updated</font></center>"); }, 1550);
            setTimeout(function(){$("#update").fadeOut(1000); }, 2200);
        }
    });  

});
});


 </script>

这是我的所有HTML

<form method="post" action="" name="edit_company_basic" id="edit_company_basic">
         <table class="company" cellspacing="0" cellpadding="7" style="width:550px; margin:0 auto;">
         <!--<tr>
            <td colspan="4" style="padding:0px;"><img src="<?php echo $image; ?>" alt="<?php echo $name; ?> Logo" /></td>   
         </tr>-->
         <tr>
            <th colspan="2" class="th_bold"><center>Basic Information</center></th>
         </tr>
         <tr>
            <th width="120">Company Name:</th>
             <td width="400" valign="top"><input type="text" name="company_name" class="company_name" id="company_name" value="<?php echo $name; ?>" style="width:395px;" /><br />
            <div class="toggle_container">
                <div class="block">
                    <span id="warning_price" style="background:#FFF9F9; border:1px solid red; min-width:395px; width:395px; padding:5px;"><strong>Warning:</strong> Editing the name will cost the company $2000</span>
                </div>
            </div>


            </td>
         </tr>
         <tr>
            <th valign="top">Company Bio:</th>
            <td width="400"><textarea name="company_bio" id="company_bio" style="width:390px; margin:0 auto; padding:5px; height:150px;"><?php echo $bio; ?></textarea></td>
        </tr>
        <tr>
            <th>Forum URL:</th>
            <td><input type="text" name="forum_url" id="forum_url" value="<?php echo $forum; ?>" style="width:395px;" /></td>
        </tr>
        <tr>
            <th>Default Collection:</th>
            <td id="tdCollection"></td>
        </tr>
        <tr>
            <th>Default Repair Assistance:</th>
            <td id="tdRepair"></td>
        </tr>
        <tr>
            <th>Default Fuel Assistance:</th>
            <td id="tdFuel"></td>
        </tr>
        <tr>
            <th>Default Ticket Assistance:</th>
            <td id="tdTickets"></td>
        </tr>
        <tr>
            <td colspan="2" id="submit_form"><div id="button_container"><center><input type="submit" name="submit_company_update" id="submit_company_update" value="Edit Company" /></center></div></td>
        </tr>
         </table>
         </form>

如果有人看到任何东西让我知道，那里有一些PHP，但没有一个是我不相信的问题，因为使用它的地方并没有给我带来任何问题。

Answer 1

请勿使用removeAttr删除已禁用，而是将其设置为false

$("#submit_company_update").attr('disabled', false);

埃里克

Answer 2

您的“点击”处理程序应返回false。如果没有，那么“submit”元素的正常动作将发生 - 提交表单。那将重新加载页面，（我猜）你的Javascript不会发生。 （目前还不清楚Javascript的运行方式和时间，所以我不确定为什么在页面重新加载后不会应用它。）

Answer 3

我永远无法让它工作，我需要完成它所以我决定做的是忘记ajax并且只需单击禁用按钮，然后使用标准提交

$("form id here").submit();

我从那里使用php，然后重新加载它会发出一条很好的消息，让他们知道它已被更新。

感谢所有的帮助，我真的非常感谢它，希望有一天我有时间可以重新访问它并让它工作;）