CODEWITHSUNDEEP
jquery
Frink
Frink

Reputation: 221

Dynamically created drop down on change function

I dynamically created table in witch I append inputs and drop down lists...

With ajax I get json values for drop-down, and assign it to some variable:

var s = $('<select />');

$.each(obj1, function (value, obj) {
    $('<option />', { value: obj.Value, text: obj.Text }).appendTo(s);
});

Later I add rows to my table:

$("#tblData tbody").append("<tr>" +
    "<td><input type='text' style=\"width:180px\" class=\"phone\"/></td>" +
    "<td><input type='text' style=\"width:180px\"/></td>" +
    "<td><input type='text' style=\"width:180px\"/></td>" +
    "<td style=\"overflow: hidden;\"><select style=\"width:212px\" class=\"dialog\">" + s.html() + "</ select></td>" +
"</tr>");

This is going on some button click, and with every click i add one row. This work perfect.(I generate new row with 3 inputs and one drop-down list).

Part that I don't know and I cant find is how to change some input value on my drop-down change (same row). (If i have 5 rows,and i change drop-down in third row, i want to change some input in third row).

I start with:

    $(".partnerTable tbody").on("click", "tr", function (e) {
            alert($(this).find(".phone").val());
    });

This was try that i see if row response to click.(partnerTable) is class of my table. I get response for each row, and that was good part.

But problem now is how make this on drop-down change.

I try things like:

$(".partnerTable tbody").on("click", "tr", function (e) {
    $(this).find("dialog").change(function () {
        alert($(this).find(".phone").val());
    });
});

But this don't work. Is it possible to make something like this?

Thanx

Upvotes: 0

Views: 571

Answers (1)

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62488

If table is also created dynamically then write like this:

 $(document).on("change", ".dialog", function (e) {

        // do something

       });

If table was create on DOM load,You can write this way:

 $(".partnerTable tbody").on("change", ".dialog", function (e) {

    // do something

   });

and the way you doing you can try this:

$(".partnerTable tbody").on("click", "tr", function (e) {
    $(this).on("change",".dialog",function () {

    });
});

Upvotes: 1

Related Questions