按鈕中的問題在Dom Ready上單擊綁定

Question

我正準備Dom準備好Html表並嘗試單擊特定行中的按鈕。以下是我的代碼。

$.ajax({ 
    url:   Url + token, 
    method:   "POST", 
    async:   true, 
    data:   JSON.stringify(data), 
    contentType: "application/json; charset=utf-8", 
    success: function (Result) { 
     var editButton = '<input type="button" class="EditRole" value="Edit">'; 
     $.each(Roles, function(key, Role) { 
      var Action = PrepareTd(editButton); 
      var tr = '<tr attr-id="' + Role.RoleID + '">' + Action + "</tr>"; 
      tbody.append(tr);   
     }); 
    }, 
    error: function (jqXHR) { 
     ErrorCallback(jqXHR); 
    } 
}); 

$(document).ready(function() { 
    $('.EditRole').on("click", function() { 
     debugger; 
     console.log($(this).parent()); 
    }); 
}); 

這從來沒有打過調試器。我錯過了什麼嗎？

Answer 1

這是一個事件委派問題第二PARAM後，使用此

$(document).ready(function() { 
    $(document).on("click", '.EditRole', function() { 
     console.log($(this).parent()); 
    }); 
});