javascript - Ajax 输入问题，文本区域模糊

Question

通过 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 然后打开信息并编辑字段值，在模糊时它不起作用。但最后一行完美无缺。问题出在哪里？

已更新

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

Answer 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() 函数仅与页面加载期间首次加载的元素绑定(bind)。
但是，当您使用 ajax 在现有页面中制作 html 新元素时，您需要再次绑定(bind)事件，但这看起来很无聊。

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

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