CODEWITHSUNDEEP
jquery
krish
krish

Reputation: 1117

Cannot read property 'replace' of undefined in jquery

I am doing inline edit with delete,cancel and update buttons.When I try to cancel the edit its showing error as Cannot read property 'replace' of undefined.
What is mistake in my code?

function editCancel(id) {
    var cancelId = $(this).attr('id');
    $("#" + cancelId).hide();
    var number = cancelId.replace("editCancel", "");
    $("#update" + number).hide();
    $("#edit" + number).show();
    $("#delete" + number).show();

}

https://jsfiddle.net/zs0hqv3e/

Upvotes: 2

Views: 7011

Answers (2)

Abdul Rafay
Abdul Rafay

Reputation: 807

Use event delegation for binding events to dynamically added elements. 

$(document).on('click', ".editCancelAction", function (){
  //Your code.
  var cancelId = $(this).attr('id');
  $("#" + cancelId).hide();
  var number = cancelId.replace("editCancel", "");
  $("#update" + number).hide();
  $("#edit" + number).show();
  $("#delete" + number).show();
});

updated fiddle: https://jsfiddle.net/zs0hqv3e/4/

Upvotes: 1

Satpal
Satpal

Reputation: 133403

Problem area is this in the function, it refers to window object not the button which invoked the function.

Modify your function

function editCancel(elem) {
    var cancelId = $(elem).attr('id');
    //rest of code
}

Pass the current element in the inline click handler like

<button class="btn editCancel btn-danger" onclick="editCancel(this)"></button>

Update Fiddle

Upvotes: 4

Related Questions