Mindblowing jQuery Weirdness
- by Jason
...at least to me. This code used to work fine. I'm pretty sure nothing has changed, but now all of the sudden it behaves oddly. Basically I'm trying to create inline editing functionality. When the user clicks on the link, it dynamically generates a textbox and a confirm and cancel link. I'm having problems with the cancel link not removing everything in the cell.
HTML:
...
<td class="bid">
<a href="javascript:" class="102093" title="Click to modify bid">$0.45</a>
</td>
...
Binding jQuery (in $(function())):
$('.bid a').live('click', renderBidChange);
....
$('.report_table .cancel').live('click', cancelUpdate);
renderBidChange (this function creates the dynamic elements):
function renderBidChange(){
var cpc = $(this);
var value = cpc.text().replace('$', '');
var cell = cpc.parent('.bid');
cpc.hide();
var input = document.createElement('input');
$(input).attr({type:'text',class:'dynamic cpc-input'}).val(value);
cell.append(input);
var accept = document.createElement('a');
$(accept).addClass('accept').attr({'href':'javascript:',
'title':'Accept Changes'}).text('Accept Changes');
cell.append(accept);
var cancel = document.createElement('a');
$(cancel).addClass('cancel').attr({'href':'javascript:',
'title':'Cancel Changes'}).text('Cancel Changes');
cell.append(cancel);
$(input).focus();
input.select();
}
cancelUpdate this function just removes everything visible (all the dynamic junk in this case) in the cell and shows what used to be there.
function cancelUpdate(){
var cell = $(this).parent();
cell.find(':visible').remove();
cell.find(':hidden').show();
}
However, for some reason, the cancel link remains after it is clicked! Everything else is removed except that. W T F
Thanks for any insight you're able to provide! I'm sure it's just some stupid little detail I'm over[caffeinatedly]looking...
UPDATE Immediately after posting this I epiphanied that it may be a CSS issue, but after double checking my code, it is not.
