Question

I’m creating dynamically a table, in the table cells are images, each image have value. After clicking on img in the gallery, it sends/copy the image to another table cell, and sends a value to a INPUT. I’m checking changes in this input, I can see that after each click value is changing but .change() doesn’t run, what should be the problem.

$(document).ready(function() {
    var most;
    var clickedTableCellAll;

    var korpusMaterialNeed = 0;
    $("#korpusChoose").on('click', '#TableKorpusGaleria tbody td', function() {
        var clickedTableCell = $(this).text();
        var clickedTableCellAll = $(this).html();
        most = $.inArray(clickedTableCell, korpusArray);
        clickedId = helperArray[most].id;
        $("#helper_input_01").val(clickedId);
        $("#helper_input_02").val(most);
        cellClick(most, helperArray);

        var setKorpusArray = $('#createTableKorpus > tbody > tr').map(function() {
            return $(this).children().map(function() {
                return $(this);
            });
        });
        setSelectedCell = $("#helper_input_03").val();
        var countSection = $('#createTableKorpus > tbody > tr > td').length;
        var korpusId = most;
        setKorpusArray[1][setSelectedCell].html(clickedTableCellAll);
        console.log('===============================');

        korpusMaterialNeed = (clickedKorpus(korpusId)) / 10000;
        $("#priestor_mat_0" + (setSelectedCell)).val(korpusMaterialNeed);
        console.log('input: ' + $("#priestor_mat_0" + (setSelectedCell)).val());


    });

    function cellClick(most, helperArray) {
        var korpusId = most;
        clickedKorpus(korpusId);
    }

    function clickedKorpus(korpusId) {
        var currentKorpusCount = helperArray[korpusId].metadesc;
        var currentKorpusPlus = helperArray[korpusId].metakey;

        var sirka = $("#param_sirka").val();
        var widthValues = calcWidthInterval(sirka);
        var ddlText = $("#pocet_priestorov option:selected").text();


        var widthSect = 0;



        var newestOptions = calcSectionWidth(widthValues, sirka);
        var currentKorpMaterial = 0;
        var currentKorpusMaterial = 0;

        $.each(newestOptions, function(i, value) {
            if (value.all == ddlText) {
                widthSect = value.val;
                currentKorpusMaterial = ($("#param_hlbka").val() * widthSect) * currentKorpusCount;

                //          return currentKorpusMaterial;
            }
            else {
                console.log('clickedKorpus >>> ERROR');
            }
            //  var currentKorpMaterial = currentKorpusMaterial;
            console.log('currentKorpusMaterial' + currentKorpusMaterial);
            return currentKorpusMaterial;

        });
        console.log('korpusId >>> clickedKorpus >>>' + korpusId);



        var currentKorpMaterial = currentKorpusMaterial;
        console.log('currentKorpMaterial' + currentKorpMaterial);

        return currentKorpMaterial;
    }


    $('#userForm').on('change', '#priestor_mat_01', function() {

        alert('hi');
    });

    $("input#priestor_mat_01").change(function() {

        alert('hi');
    });

});

Answer 1

Programmatically updating the value of an input (for example using the .val() function) doesn’t trigger the change function. You’ll need to also programmatically trigger the function, using the .trigger() function:

$("#priestor_mat_0" + (setSelectedCell)).val(korpusMaterialNeed).trigger('change');