Ajax issue with input, textarea blur

Question

Have problem with submiting information via ajax.

Have for example 20 rows. Click on row and it opens all information about services.

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

Here 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 } ?>

Then its div with info

<?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>

I'm saving class in localStorage. And then user edits value in field and hes out off that field, I update that information with 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();
});

The problem is that it's only works with last row. First row, second, 5 , 10 then opens information and edit field value, on blur it don't work. But last row works perfectly. Where can the problem be ?

UPDATED

PROBLEM SOLVE, I add my ajax in $('tr').click and change localStore with var servicesUpdateId = $(this).attr('data');. Maybe the problem was localStore. But in console, it always shows true value.

Answer 1

Replace

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

with

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

As .blur() functions is bind only with the elements which are loaded for the first time during page load.
But when you make html new elements in an existing page using ajax you need to bind the event again but this looks a boring task.

For this use jQuery.on() , and pass event name as first param, and rest same as .bind()/.click() or any other event functions.

So its better to use jQuery.on("eventName").