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){
        var notes=$("#notes_input_"+id).val();
        var data = 'id='+ id +'&notes='+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');

           return false;
    // Edit input box click action
        return false;
    // Outside click action
<table border=1 id='search' class='queue'>
<tr id='row_1'>
    <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>

Edited by dschuett

5 Years
Discussion Span
Last Post by AleMonteiro


Here it's working: http://jsfiddle.net/3MwXd/17/

The problem: you add the 'change' listener each time the <td> is clicked. That means that the second time you click, the input will have 2 listeners. The third time, 3 listeners, and so on.
The solution(not changing much of your code) is to unbind the change event before adding a new one.

And about adding click listener on dynamic rows, an example:




(I didn't test it, but both should work)

Hope it helps.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.