等到用户单击跨度，然后触发AJAX请求 [英] Wait until user click a span then trigger AJAX request

问题描述

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

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.

我非常感谢使用适当的jquery指令所提供的帮助

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

<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');，原因是第二种情况下的输入是不确定的.

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.

推荐答案

主要感谢@ADyson，该问题已得到解决.下一步，我要处理的是Django中的400(错误请求)PUT方法，但是是的，这是一个不同的故事.现在，只有在单击检查"图标/跨度时才执行AJAX，这是解决方案的目标.

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

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

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>

这篇关于等到用户单击跨度，然后触发AJAX请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！