输入的 Ajax 问题，textarea 模糊答案

【问题标题】：Ajax issue with input, textarea blur输入的 Ajax 问题，textarea 模糊
【发布时间】：2019-03-22 02:49:27
【问题描述】：

通过 ajax 提交信息时遇到问题。

例如有 20 行。单击行，它会打开有关服务的所有信息。

    $('tr').click(function() {
       var servicesUpdateId = $(this).attr('data'); 
       $("#"+servicesUpdateId).css({"display":"block", 'opacity':'0'}).animate({left: '0',opacity: '1',});
       // save form class for ajax submit
       localStorage.setItem("formId", servicesUpdateId); 
    });

这里是html：

<tbody>
<?php
    $allServices = Services::where('user_id', $mainUser->id);
    foreach($allServices as $oneServices) {
?>
<tr class="services-table-hover" data="services_<?php echo $oneServices->id; ?>">
    <td> <div class="services-color"></div> <img src="/assets/images/provider_img2.png" alt=""> </td>
    <td class="title-name"> <?php echo $oneServices->name; ?> </td>
    <td> <?php echo $oneServices->description; ?> </td>
    <td> <?php echo $oneServices->duration; ?> mins </td>
    <td> <?php echo $oneServices->currency; ?> <?php echo $oneServices->price; ?> </td>
    <td style="line-height: 50px;"> <i class="icon-arrow-right"></i> </td>
</tr>
<?php } ?>

然后是带有信息的 div

<?php foreach($allServices as $onesServices) { ?>
<div id="services_<?php echo $onesServices->id; ?>">
<div class="portlet light minHeigh staff-hover">
    <form action="" method="post" class="services_<?php echo $onesServices->id; ?>">
        <div class="portlet-title tabbable-line">
            <a class="goBackOne"><i class="icon-arrow-left"></i></a><h3 style="display: inline-block;"><?php echo $lang['SERVICES_LEFT_MENU_ALL']; ?></h3>
        </div>
        <div class="col-sm-7">
            <div class="portlet-body">
            <div class="tab-content">
                <div class="tab-pane active" id="portlet_tab1">
                    <div class="form-body input-smaller">
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="form_control_1"><img class="imgs" src="/assets/images/provider_img2.png" alt=""></label>
                            <div class="col-md-9">
                                <input type="text" class="form-control" name="update_service_name" style="margin-bottom:10px; font-size: 26px; font-weight: 600;" value="<?php echo $onesServices->name; ?>">
                                <textarea name="update_service_description" id="" cols="30" rows="10" class="form-control" style="margin-bottom:10px;" placeholder="Description"><?php echo $onesServices->description; ?></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="form_control_1"><?php echo $lang['SERVICES_INSIDE_COST']; ?></label>
                            <div class="col-md-9">
                                <input type="text" class="form-control" name="update_service_price" value="<?php echo $onesServices->price; ?>">
                            </div>
                        </div>
                        <div class="clearfix"></div>
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="form_control_1"><?php echo $lang['SERVICES_INSIDE_TIME']; ?></label>
                            <div class="col-md-9">
                                <input type="text" class="form-control" name="update_service_duration" value="<?php echo $onesServices->duration; ?>">
                            </div>
                        </div>
                        <div class="clearfix"></div>
                        <div class="form-group">
                            <?php 
                                $servicesCat = $onesServices->service_categories_id;
                                $servicesCat = json_decode($servicesCat);
                            ?>
                            <label class="col-md-3 control-label" for="form_control_1"><?php echo $lang['SERVICES_INSIDE_LIST']; ?></label>
                            <div class="col-md-9">
                                <select id="multiple2" name="update_services_category" class="form-control select2-multiple" multiple placeholder="Select categories">
                                    <?php foreach($servicesCategories as $onCategory) { ?>
                                        <?php if(in_array($onCategory->id, $servicesCat)) { ?>
                                            <option value="<?php echo $onCategory->id; ?>" selected><?php echo $onCategory->name; ?></option>
                                        <?php } else { ?>
                                            <option value="<?php echo $onCategory->id; ?>"><?php echo $onCategory->name; ?></option>
                                        <?php } ?>
                                    <?php } ?>
                                </select>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
          </div>
        </div>
        <div class="col-sm-5">
            <h4><?php echo $lang['SERVICES_INSIDE_PROVIDE']; ?></h4>
            <?php
                $staffs_eupdate = Staffs::where('id_users', $mainUser->id);
                $serviceStaff = ServiceStaffs::find_by_query("SELECT staff_id FROM service_staffs WHERE user_id = '$mainUser->id' AND services_id = '$onesServices->id' ");
                $newStaffId = array();

                foreach($serviceStaff as $index => $sStaff) {
                    $newStaffId[$index] = $sStaff->staff_id;
                }

                foreach($staffs_eupdate as $staff_update) {
            ?>
            <div class="full-services">
                <div class="all-services">
                    <?php if(in_array($staff_update->id, $newStaffId)) { ?>
                    <div class="all-around all-around-on">
                        <div class="float-on-left">
                            <div class="ignore_img"><input type="hidden" name="update_staffs_id[]" value="<?php echo $staff_update->id; ?>"></div>
                            <?php echo $staff_update->name; ?>
                        </div>
                    </div>
                    <?php } else { ?>
                    <div class="all-around all-around-non">
                        <div class="float-on-left">
                            <div class="ignore_img"><input type="hidden" name="update_staffs_id[]" value="<?php echo $staff_update->id; ?>"></div>
                            <?php echo $staff_update->name; ?>
                        </div>
                    </div>
                    <?php } ?>
                </div>
            </div>
            <?php } ?>
        </div>
    </form>
</div>

我正在 localStorage 中保存课程。然后用户在字段中编辑值并退出该字段，我使用 ajax 更新该信息

    $('.'+localStorage.getItem("formId")+' input, .'+localStorage.getItem("formId")+' textarea').blur(function(event) {

    var updateStaffId = $("."+localStorage.getItem("formId")+" .all-around-on input[name='update_staffs_id[]']").map(function(){return $(this).val();}).get();
    var updateCategoriesId = $("."+localStorage.getItem("formId")+" select[name=update_services_category] option:selected").map(function(){return $(this).val();}).get();

    var formData = {
        'from'                          : 'serviceUpdate',
        'user_id'                       : '<?php echo $mainUser->id; ?>',
        'services_id'                   : localStorage.getItem("formId"),
        'update_services_name'          : $('.'+localStorage.getItem("formId")+' input[name=update_service_name]').val(),
        'update_services_description'   : $('.'+localStorage.getItem("formId")+' textarea[name=update_service_description]').val(),
        'update_services_price'         : $('.'+localStorage.getItem("formId")+' input[name=update_service_price]').val(),
        'update_services_duration'      : $('.'+localStorage.getItem("formId")+' input[name=update_service_duration]').val(),
        'update_services_category'      : updateCategoriesId,
        'update_services_staff'         : updateStaffId
    };

    $.ajax({
        type        : 'POST',
        url         : 'ajax/ServicesAjax.php',
        data        : formData,
        dataType    : 'json',
        encode      : true
    })
        // using the done promise callback
        .done(function(data) {
            if(data['success'] == true) {
                toastr.success("Information updated successfuly!", "Services");
            }
        })

        // using the fail promise callback
        .fail(function(data) {
            // show any errors
            // best to remove for production
            console.log(data);
        });

    // stop the form from submitting the normal way and refreshing the page
    event.preventDefault();
});

问题是它只适用于最后一行。第一行，第二，5，10 然后打开信息并编辑字段值，模糊它不起作用。但最后一行工作得很好。问题出在哪里？

更新

问题解决，我将我的 ajax 添加到 $('tr').click 并用 var servicesUpdateId = $(this).attr('data'); 更改 localStore。也许问题是localStore。但在控制台中，它总是显示出真正的价值。

【问题讨论】：

你确定你的 id 是唯一的
表格有等级，所有等级都是独一无二的。我用ID测试过，同样的问题。
为什么要存储到本地存储中？为什么不直接使用选定的类或唯一 ID 调用 ajax？是否有特定的存储原因？
我将信息存储在 localStorage 以了解正在编辑的表单。然后用户编辑字段模糊它的更新。
你能用 html 更新问题吗？您正在将数据属性值设为您的 id，但您正在调用 tr 的 id 来模糊？

标签： javascript php jquery ajax

【解决方案1】：

替换

  $('.'+localStorage.getItem("formId")+' input, .'+localStorage.getItem("formId")+' textarea').blur(function(event) {

与

$('.'+localStorage.getItem("formId")+' input, .'+localStorage.getItem("formId")+' textarea').on("blur",function(event) {

由于 .blur() 函数仅与页面加载期间首次加载的元素绑定。
但是，当您使用 ajax 在现有页面中创建 html 新元素时，您需要再次绑定事件，但这看起来很无聊。

为此使用 jQuery.on() ，并将事件名称作为第一个参数传递，其余与 .bind()/.click() 或任何其他事件函数相同。

所以最好使用 jQuery.on("eventName")。

【讨论】：

它完全停止工作，知道并且最后一个 tr 表格不起作用。
您的项目是否部署在某个地方，或者您可以在 jsfiddle 上传递工作模型，以便我查看工作原型。
它是用php的，所以在jsfiddle中无法处理。但我添加了所有页面代码jsfiddle.net/anonimnos/v64rbzf2
小提琴看起来很安静，你能通过stackoverflow.com/questions/10082031/…，我希望这会有所帮助
问题不在现场，在或其他。问题是为什么它只提交最后一个表单。

【解决方案2】：

问题解决，我将我的 ajax 添加到 $('tr').click 并使用 var servicesUpdateId = $(this).attr('data'); 更改 localStore。也许问题是localStore。但在控制台中，它总是显示出真正的价值

【讨论】：