jQueryは、ページに動的に追加されたデータをリアルタイムで保存します.

需要:ユーザーが記入したものは、リアルタイムで保存する必要があります.
分析:change、keyupなどのユーザー操作イベントを傍受し、バックエンドに要求を送信する
実際の状況:

ユーザーが記入したフォームは、JavaScriptによって動的に追加され、動的に追加された要素にイベントをバインドする必要があります.

は、前の必須項目が完全に記入されているかどうかに応じて、バックエンドに要求を送信します.

ユーザーが動的に記入欄を追加したかどうかを区別しなければなりませんか?それとも修正していますか?

現在のイベントオブジェクトは何ですか?ユーザーが入力したデータを取得するにはどうすればいいですか?

ユーザーは同じ欄を複数回修正し、ID付きデータをバックエンドに転送しなければならない.目的:新規または更新操作を識別するために使用されます.

動的新規コード:

// template()           
$('#modal_pl_content').html(template('modal_temp', {data:''}));

テンプレートコード:

<form class="cksd_comment_id">      
    <div class="col-sm-12 addID">
        <input type="hidden" name="comment_update_id" value="" />      
        <div class="col-sm-12 hr hr-18 dotted hr-dotted"></div>
        <div class="col-sm-3 form-group">                
            <label class="col-sm-3 control-label no-padding-right">  ID</label>            
            <div class="col-sm-9"><input type="text" class="col-xs-12" name="commentID"></div>         
        </div>         
        <div class="col-sm-1 form-group">            
            <select name="star" onchange="checkIsInput(this)">               
                <option value="5">5</option>               
                <option value="4">4</option>               
                <option value="3">3</option>               
                <option value="2">2</option>               
                <option value="1">1</option>            
            </select>         
        </div>         
        <div class="col-sm-4 form-group">                
            <label class="col-sm-3 control-label no-padding-right">    </label>            
            <div class="col-sm-8">               
                <div class="col-sm-5"><input type="text" class="col-xs-12" name="now_yes" onkeyup="is_intdata(this,this.value)" value="0"></div>                    
                <label class="col-sm-1 control-label no-padding-left no-padding-right">of</label>               
                <div class="col-sm-5"><input type="text" class="col-xs-12" name="now_total" onkeyup="is_intdata(this,this.value)" value="0"></div>            
            </div>        
        </div>            
        <div class="col-sm-3 form-group">                
            <div class="col-sm-12">                    
                <label class="col-sm-1 control-label no-padding-left no-padding-right">Yes</label>                    
                <div class="col-sm-5"><input type="text" class="col-xs-12" name="add_yes" onkeyup="is_intdata(this,this.value)" value="0"></div>                    
                <label class="col-sm-1 control-label no-padding-left no-padding-right">No</label>                    
                <div class="col-sm-5"><input type="text" class="col-xs-12" name="add_no" readonly onkeyup="is_intdata(this,this.value)" value="0"></div>
            </div>            
        </div>        
        <div class="col-sm-1 form-group">  ： <br><span class="total_yes">0</span> of <span class="totals">0</span></div>         
        <div class="col-sm-1 form-group delbox"><button type="button" class="btn btn-danger btn-xs" onclick="delPlID(this)">  </button></div>      
    </div>   
</form>

イベントのリスニングと送信要求コード:

$(document).on("change keyup", ".cksd_comment_id", function(event) {   
/*   var current = event.target.tagName.toLowerCase();  
 if ((current != 'input') || (current != 'select')) {      
    event.preventDefault();   
  }  
*/   
 var praise_row = {};  
 praise_row.cpid_a = $("[name='cpid_a']").val();   
 praise_row.pt_a = $("[name='pt_a']").find("option:selected").val();  
 praise_row.dp_a = $("[name='dp_a']").find("option:selected").val();   
 praise_row.cptime_start = $("[name='cptime_start']").val();   
 praise_row.cptime_end = $("[name='cptime_end']").val();   
 praise_row.cpkeyword_a = $("[name='cpkeyword_a']").val();   
 praise_row.status = $("[name='cksd_status']").val();   
 if (praise_row.cpid_a && praise_row.pt_a && praise_row.dp_a && praise_row.cptime_start && praise_row.cptime_end) {      
    var comment_row = {};      
    $(this).find('input, select').each(function () {         
        var field = $(this).attr('name');         
        comment_row[field] = $(this).val();      
    });      
    var pp_id = $("input.cksd_praise_pid").val();      //console.log($(this));      
    var current_form = $(this);      
    var comment_id = $(this).children().find("[name='comment_update_id']").val();      
    var data = {};      
    if (pp_id) {         
        praise_row.id = pp_id;         
        comment_row.id = comment_id;         
        data = {praise: praise_row, comment: comment_row}      
    } else {         
        data = {praise: praise_row, comment: comment_row};      
    }      
    //console.log(data);      
    $.ajax({         
      type: 'post',         
      url: "",         
      data: data,         
      dataType: 'json'      
     }).done(function(res) {         
        if ((res.s == 0)) {            
          console.log($(this));            
          $('input.cksd_praise_pid').val(res.msg.p_id);            
          current_form.children().find("[name='comment_update_id']").val(res.msg.c_id);         
        }         
        console.log(res);      
    });   
}});