Wait until user click a span then trigger AJAX request

问题

Currently I'm working with simple AJAX put request when user change something in input field and click on "check" icon. The code below doesn't change icon from "edit" to "check", BUT when I delete a line $.when($(icon).trigger("click")).then(function(){ with AJAX request then the icon will change.

I really appreciated any help with the appropriate jquery instruction

$(document).ready(function() {
    $('.clickable-edit-icon').click(function(e){
        e.preventDefault();

        var delete_id = $(this).closest('tr').data('contact-id');
        var icon = $(this).children();
        var input = $(this).parent().children('input');
        var input_text = $(input).text();

        if (icon.text() == "edit") {
            $(input).prop('disabled', false);
            $(icon).text("check");
            $.when($(icon).trigger("click")).then(function(){
                $.ajax({
                    url: 'edit/'+delete_id+'/',
                    method: 'PUT',
                    data: {},
                    contentType:'application/json',
                    error: function(result){},
                    success: function(result) {}
                });
            });
        }else{
            $(input).prop('disabled', true);
            $(icon).text("edit");
        }
    });
});

HTML Structure

<tr>
   <td id="contact-first-name">
      <input value="{{ contact.first_name }}" disabled>
          <span class='clickable-edit-icon'>
              <i class='tiny material-icons'>edit</i>
          </span>
   </td>
</tr>

If you wondering why I wrote var input = $(this).parent().children('input'); instead of var input = $(this).parent('input'); the reason is that input in second case is undefined.

回答1:

Mainly thanks to @ADyson the issue has been resolved. The next step I have to deal with is a 400 (Bad Request) PUT Method in Django but yes.. it's a diffrent story. Now AJAX is executed only when a 'check' icon/span was clicked and that was a goal of solution.

JS File

$(document).ready(function(){

    $(".clickable-edit-icon").on('click',function(e){
        e.preventDefault();

        var span = $(this);
        var icon = $(this).children();
        var input = span.siblings('input');

        input.prop('disabled', false);
        span.siblings(".clickable-check-icon").show();
        span.hide();
    });

     $('.clickable-check-icon').on('click',function(e){
        e.preventDefault();

        var span = $(this);
        var icon = $(this).children();
        var input = span.siblings('input');
        var edit_id = span.closest('tr').data('contact-id');

        input.prop('disabled', true);
        span.siblings(".clickable-edit-icon").show();
        span.hide();

        $.ajax({
            url: 'edit/'+edit_id+'/',
            method: 'PUT',
            data: {},
            contentType:'application/json',
            dataType: 'json',
            error: function(result){},
            success: function(result) {
                $(icon).text("edit");
                $(input).prop('disabled', true);
            }
        });

    });
});

HTML Structure

<tr>
   <td id="contact-first-name">
      <input value="{{ contact.first_name }}" disabled>
          <span class='clickable-edit-icon'>
              <i class='tiny material-icons'>edit</i>
          </span>
          <span class='clickable-check-icon' style="display:none;">
              <i class='tiny material-icons'>check</i>
          </span>
   </td>
</tr>

回答2:

Without seeing the html structure, I've put it in a simple way:

<div class='item'>
  <input tyle="text" />
  <span class="clickable-edit-icon editing">check</span>
</div>

$(document).ready(function() {
  $('.clickable-edit-icon').on('click',function(e){
        e.preventDefault();

        var delete_id = $(this).closest('tr').data('contact-id');
        var icon = $(this);
        var input = $(this).parent().children('input');
        var input_text = $(input).text();
        if (icon.text() == "edit") {
            $(input).prop('disabled', false);
            $(icon).text("check");
            $.when(icon.trigger("click")).then(function(){
              $.ajax({
                    url: 'edit/'+delete_id+'/',
                    method: 'PUT',
                    data: {},
                    contentType:'application/json',
                    error: function(result){},
                    success: function(result) {}
                });
            });
        }else{
            $(input).prop('disabled', true);
            $(icon).text("edit");
        }
    });
};

Hope it helps with the thinking.

来源：https://stackoverflow.com/questions/56257178/wait-until-user-click-a-span-then-trigger-ajax-request