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

希望它有助于思考。

等到用户单击跨度，然后触发AJAX请求

2 个答案: