Dynamically Created Element and event

JavaScript
1

I want to know how to add event to dynamically created element. it works fine for rows on AddFieldsToFormDiv table, but needed
to bind SplitSelectValue to the AddFieldsToDebugDiv table to.

Working jsfiddle here

This is the javascript:

$(document).on('change', '[id^="SelID_"]', function () {
    SplitSelectValue($(this));
});

function SplitSelectValue(obj) {
    var data = obj.find("option:selected").val();
    var arr = data.split('|');
    var tr = obj.closest('tr');
    tr.find("[id^='SelVala_']").val(arr[0]);
    tr.find("[id^='SelValb_']").val(arr[1]);
    tr.find("[id^='SelValc_']").val(arr[2]);
    tr.find("[id^='SelVald_']").val(arr[3]);
    tr.find("[id^='SelVale_']").val(arr[4]);
}
2

Use event delegation.
This allows us to attach a single event listener, to a parent element, that will fire for all children matching a selector, whether those children exist now or are added in the future.

This should help: Understanding Event Delegation

3

This was fixed like this:

function SplitSelectValue(obj) {
    var data = obj.val();
    var arr = data.split('|');
    var tr = obj.closest('tr');
    tr.find(".SelVala_").val(arr[0]);
    tr.find(".SelValb_").val(arr[1]);
    tr.find(".SelValc_").val(arr[2]);

    var table2 = $('#AddFieldsToDebugDiv');
    var row = table2.find('tr:eq(' + tr.index() + ')');
    row.find(".SelVald_").val(arr[3]);
    row.find(".SelVale_").val(arr[4]);
}