Jquery on change does not work after reflecting ajax results

Question

I am new to jquery. I am trying dynamic adding,editing,searching of table though jquery, php. My code works fine for initial adding,editing,searching. However, after searching, when I replace the table entries through ajax and try to edit the resultant entries, the click/change functions do not work.

$(document).ready(function () {
$(".edit_tr").click(function () {
    var ID = $(this).attr('id');
    $("#Client_" + ID).hide();
    $("#address_" + ID).hide();
    $("#Client_input_" + ID).show();
    $("#address_input_" + ID).show();
})

$(".edit_tr").change(function () {
    var ID = $(this).attr('id');
    var Client = $("#Client_input_" + ID).val();
    var address = $("#address_input_" + ID).val();

    var dataString = 'id=' + ID + '&Client=' + Client + '&address=' + address;


    $.ajax({
        type: "POST",
        url: "table_edit_ajax.php",
        data: dataString,
        cache: false,
        success: function (html) {
            $("#Client_" + ID).html(Client);
            $("#address_" + ID).html(address);
        }
    });
} else {
    alert('Enter something.');
}

});

// Edit input box click action
$(".editbox").mouseup(function () {
    return false
});

// Outside click action
$(document).mouseup(function () {
    $(".editbox").hide();
    $(".text").show();
});

});

possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Satpal, Mar 09 '14 at 16:03

score 0 · Answer 1 · answered Mar 09 '14 at 15:50

0

use .on()

As elements added dynamically so it is not present at the time DOM ready or page load.

So you have to use Event Delegation

Syntax

$( elements ).on( events, selector, data, handler );

like this

$(document).on('click','.edit_tr',function(){
    //code here
});

or

$('parentElementPresesntAtDOMready').on('click','.edit_tr',function(){
   // code here
});

answered Mar 09 '14 at 15:50

Tushar Gupta - curioustushar

58,085
24
103
107

Thank you so much . Now, after changing to on, code works fine in chrome.. but not in IE.. click works but change won't.. infact the cursor won't wait for us enter.. any ideas? – user3398760 Mar 09 '14 at 17:23
@user3398760 Which version of jQuery library are u using And IE version ? – Tushar Gupta - curioustushar Mar 09 '14 at 17:24
Do you think there is a problem in this syntax..$("#maintable").on("change",".edit_tr",function(){ – user3398760 Mar 09 '14 at 17:30
No errors on console.. when try $("document").on does not help.. I tried .. that did not help either.. – user3398760 Mar 09 '14 at 17:47
@user3398760 make a fiddle or give a live link to the problem .and try `$(document).on` without quotes . – Tushar Gupta - curioustushar Mar 10 '14 at 02:22
Ok. Got the error! I need to use "on" for $(".editbox").mouseup(function () { return false }); Did not do that before! – user3398760 Mar 10 '14 at 14:14

score 0 · Accepted Answer · answered Mar 09 '14 at 15:52

0

Event are assigned to elements when document is ready. Any element which is added later will not be attached to any event automatically.

Either try using .delegate or .on or attach event explicitly after your new element is added.

answered Mar 09 '14 at 15:52

Shovan

185
7

Jquery on change does not work after reflecting ajax results

2 Answers2