等到用户点击一个 span 然后触发 AJAX 请求

Question

目前，当用户在输入字段中更改某些内容并单击“检查”图标时，我正在使用简单的 AJAX 放置请求。下面的代码不会将图标从“编辑”更改为“检查”，但是当我使用 AJAX 请求删除一行 $.when($(icon).trigger("click")).then(function(){ 时，图标会更改。

我非常感谢任何有关相应 jquery 指令的帮助

$(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 结构

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

如果您想知道为什么我写了var input = $(this).parent().children('input'); 而不是var input = $(this).parent('input');，原因是第二种情况下的输入未定义。

Answer 1

主要感谢@ADyson，问题已得到解决。我必须处理的下一步是 Django 中的 400（错误请求）PUT 方法，但是是的.. 这是一个不同的故事。现在 AJAX 仅在单击“检查”图标/跨度时执行，这是解决方案的目标。

JS 文件

$(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 结构

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

Answer 2

没有看到html结构，我简单说一下：

<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");
        }
    });
};

希望对思考有所帮助。