JQuery Stops Working After Deleting Textarea

Question

I have the following JQuery in my page. The page loads fine, and the code works initially. If I edit the textarea field, clicking the field again doesn't work. Is there a way to bind the JQuery functionality even after the textarea is edited?

$(document).ready(function() {
$("#prop_notes").dblclick(function() {
    var timestamp = '2013-04-01 20:40:00';
    var userid = '1';
    var username = 'Jim Williams';
    if ($('#prop_notes').val() == '') {
        $("#prop_notes").text("Timestamp: " + timestamp + "\nUser ID: " + userid + "\nUser: " + username);
    }
    else {
        $("#prop_notes").text($("#prop_notes").text() + "\n\n- - - - - - - - - - - - - - - - - - - -\n\nTimestamp: " + timestamp + "\nUser ID: " + userid + "\nUser: " + username);
    }
});

});

Reproducible behavior fiddle: http://jsfiddle.net/njgray/MxPNX/1/

`#prop_notes` is an input field? can you show us a demonstration on http://jsfiddle.net/ — Chamara Keragala, Apr 14 '13 at 04:29
Yes - the #prop_notes is the ID of a text area input field. Also, I adjusted the jsfiddle and will shortly adjust my sample script to remove the PHP. Now, if you test the jsfiddle, you can double-click the result field and it adds a timestamp with user info. If you do that a couple times, then delete the field, the next double-click does nothing. — optimistictoaster, Apr 14 '13 at 16:36

score 0 · Accepted Answer · answered Apr 14 '13 at 04:59

0

Try using .val() instead of .text() http://jsfiddle.net/sXkPE/3/

$(document).ready(function () {
    $("#prop_notes").on('dblclick', function () {
        var timestamp = '<?php echo $timestamp; ?>';
        var userid = '<?php echo $user_id; ?>';
        var username = '<?php echo $user_full_name; ?>';
        if ($('#prop_notes').val() == '') {
            $("#prop_notes").val("Timestamp: " + timestamp + "\nUser ID: " + userid + "\nUser: " + username);
        } else {
            $("#prop_notes").val($("#prop_notes").val() + "\n\n- - - - - - - - - - - - - - - - - - - -\n\nTimestamp: " + timestamp + "\nUser ID: " + userid + "\nUser: " + username);
        }
    });
});

answered Apr 14 '13 at 04:59

trmb

76
2

Thank you for your help. I tried changing val() functions to text() but had the same experience. I wasn't sure of the difference. I found a couple references that said text() isn't appropriate for working with input elements. [Link1](http://stackoverflow.com/questions/807867/difference-between-val-and-text) Am I missing something? – optimistictoaster Apr 14 '13 at 16:48
.text() captures whatever is inside the tags and not the value attribute is my assumption as to why that is. The jsfiddle I linked to above works properly in Safari on 10.8, maybe there is a browser issue happening. I also switched from .dblclick() to .on() but I don't think that's relevant. – trmb Apr 14 '13 at 19:22
I'm an idiot. I looked at this again and I think I was transposing the two methods. It looks like it's working now. Thanks for your help! – optimistictoaster Apr 15 '13 at 01:43

JQuery Stops Working After Deleting Textarea

1 Answers1