Question

I’m having issues preventing a child element from activating a parent click event in jQuery. I’ve Google’d around and have stumbled upon a couple different solutions, none of which appear to work for me.

I need to make a table cell editable after clicking it so that I can submit the edited text asynchronously via ajax. I’m using jQuery to replace the text with an input field but it then can’t be edited or submitted because each click fires the parent event again.

I’ve tried using:

$("child").click(function(e){  
  e.stopPropagation();
})

And also .unbind("click") on the parent as once it’s been clicked it won’t need to be clicked again but this seems to unbind the child too.

I’ve prepared a fiddle in order to properly show the problem.

Any help at all would be super! It’s driving me crazy.

Answer 1

A couple things here.

1. Everytime you click onto the table cell, you’re regenerating the form elements. This includes not only the click on the cell to switch the contents to the edit control, but also when you click onto the textfield to focus on it to perform text changes
2. The click for your button, will never fire, as it’s being bound BEFORE the control exists in the dom.

My suggestion would be to have the controls already exist on the page, but have the clicking of the element be for controlling the VISIBLITY of the textbox. Additionally, put the text to be clicked into a span or label or div, and click on it that way, as opposed to the actual cell.

$("#td-edit").click(function() {
    $("#td-edit").hide();
    $("#dvEdit").show();
});

$("#btn-comment").click(function(e) {
    $("#td-edit").show();
    $("#dvEdit").hide();
});

Updated fiddle