I have a problem whith my .change() function firing twice on my onClick. First of all, I know jquery has a .click function, but since my table (results) are bing displayed/pulled in dynamically from an $.ajax call I don't know of a way to bind .click since the content doesn't exist on the page initially. - Could I call a js file using the $.ajax complete function?
Anyways, here is the code i'm using: http://jsfiddle.net/3MwXd/15/
function liveEdit(id){
$("#notes_"+id).hide();
$("#notes_input_"+id).show();
$(".editbox").change(function(){
var notes=$("#notes_input_"+id).val();
var data = 'id='+ id +'¬es='+notes;
if(confirm("Are you sure you wanted to update notes?")){
$("#visual_"+id).html('<img src="http://powerfulorganisations.com/images/style/list_check-mark-green-small.png" />').fadeIn('slow').delay(3000).fadeOut('slow');
$("#notes_"+id).html(notes);
}
else{
return false;
}
});
// Edit input box click action
$(".editbox").mouseup(function(){
return false;
});
// Outside click action
$(document).mouseup(function(){
$(".editbox").hide();
$(".text").show();
});
}
<html>
<table border=1 id='search' class='queue'>
<tr>
<th>ID</th><th>Vendor</th><th>Notes</th><th>Date</th><th>Total</th>
</tr>
<tr id='row_1'>
<td>1</td>
<td>vendor 1</td>
<td class='edit_td' onClick="liveEdit('1');"><span id='notes_1' class='text'>Testing 123.</span><input style='display:none;' type='text' value='Testing 123.' class='editbox' id='notes_input_1' /><span style='display:none;' id='visual_1'></span></td>
<td>2012-08-06</td><td class='right'>100.00</td>
</tr>
</html>