JQuery에 의해 생성 된 양식 동작이 작동하지 않습니다.

Question

JQuery를 사용하여 단추를 클릭하여 양식을 채우는 페이지가 있습니다. 이 양식에는 두 개의 텍스트 상자와 제출 단추가 있지만 제출 단추를 클릭하면이 양식을 제출할 수 없습니다. 누군가이 문제를 해결할 수 있도록 도와주세요.

$(document).ready(function() { 
edittr = function (id) { 
    var oldhtml = $(".tr-" + id).html(); 
    $(".tr-" + id + " td").each(function() { 
     if ($(this).attr("id") == "td-edit-" + id) { 
      $(this).html("<button class='btn btn-sm btn-primary' type='submit' onclick='onupdateclick(" + id + ")'><i class='fa fa-save'></i>&nbsp;UPDATE</button>&nbsp;" + 
       "<input type='hidden' name='MaterialID' id='MaterialID' value='" + id + "' />" + 
       "<button class='btn btn-sm btn-default' type='button'>CANCEL</button>"); 
     } 
     if ($(this).attr("id") != "td-edit-" + id) { 
      $(this).html("<label class='input'><input type='text' name='" + $(this).attr("itemid") + "' value='" + $(this).text() + "' /></label>"); 
     } 
    }); 
} 

Answer 1

당신은 예를 들어 동적으로 생성 된 요소에 대한 event delegation을 사용할 수 있습니다 :

$(document).on('click','input[type="submit"]',function() { 
    $(this).closest('form').submit(); 
}); 

내가 면도기보기를 사용하고, 여기에,

@foreach (Material cert in MaterialList) 
    { 
    <tr class="tr-@cert.MaterialID"> 
    @using (Html.BeginForm("EditMaterial", "MyController", FormMethod.Post, new { id="form-"+cert.MaterialID})) 
    { 
    <td itemid="Name">@cert.Name</td> 
    <td itemid="Description">@cert.Description</td> 
    <td id="td-edit-@cert.MaterialID">  
    <button onclick="edittr('@cert.MaterialID')">Edit</button>                    
    <a href="javascript:void(0)" class="btn btn-xs btn-danger"><i class="fa fa-trash-o" style="cursor: pointer;" onclick="togglesingle('tr_statename-del-@cert.MaterialID')"></i>&nbsp;Remove</a>  
    </td> 
    } 

JQuery와 코드 내 코드입니다