Member Avatar for dschuett

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 +'&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');
            $("#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>
Edited by dschuett
  • 2 Contributors
  • 1 Reply
  • 2K Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by AleMonteiro
Member Avatar for AleMonteiro

Hi.

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:

$("#myTable").append("<tr><td>test</td></tr>");
$("#myTable").find("tr").click(function(){...});

OR

$("<tr><td>test</td></tr>")
    .click(function(){...})
    .appendTo("#myTable");

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

Hope it helps.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.