Call a function from Dynamically added html code using jquery

Question

This is the scenario

$(document).ready(function(){
 var rowIndex = 0;
 var count = 0;
 function callThisFunction(index, value, count) {
 alert('called');
}

function dynamicContentAdd() {
 rowIndex++;
 count++;

 var row = "<input name='input["+rowIndex+"]' onkeyup = 'callThisFunction("+rowIndex+","+total[1]+","+count+");' id='input"+rowIndex+"'  type='text' class='inputfield' />";

 $("#table").append(row);
}

I have called the function dynamicContentAdd() on click of a button and it is working fine. But what is not working is it is not calling function callThisFunction() on keyup. It gives the error that the function is not defined. But when I have the same function in external js file then it calls it successfully. Is this not the way to call the function from dynamic added html code in jquery.

Please let me know.

Thanks

Arun P Johny · Accepted Answer · 2013-10-17 02:40:59Z

5

The problem is since you are using inlined event handlers the js engine will look for the function callThisFunction in the global scope, but you have added the function in the dom ready handler making it a local function to the dom ready handler which will result in the js throwing an error.

Solution 1. make the function global

//since the function is define outside of dom ready handler it is available in the global scope
function callThisFunction(index, value, count) {
    alert('called');
}

$(document).ready(function () {
    var rowIndex = 0;
    var count = 0;

    function dynamicContentAdd() {
        rowIndex++;
        count++;

        var row = "<input name='input[" + rowIndex + "]' onkeyup = 'callThisFunction(" + rowIndex + "," + total[1] + "," + count + ");' id='input" + rowIndex + "'  type='text' class='inputfield' />";

        $("#table").append(row);
    }
})

or

$(document).ready(function () {
    var rowIndex = 0;
    var count = 0;

    //define the function as a property of the window object again making it available in the public scope
    window.callThisFunction = function (index, value, count) {
        alert('called');
    }

    function dynamicContentAdd() {
        rowIndex++;
        count++;

        var row = "<input name='input[" + rowIndex + "]' onkeyup = 'callThisFunction(" + rowIndex + "," + total[1] + "," + count + ");' id='input" + rowIndex + "'  type='text' class='inputfield' />";

        $("#table").append(row);
    }
})

Solution 2: The jQuery way - Use a delegated event handler with data-* attributes

$(document).ready(function () {
    var rowIndex = 0;
    var count = 0;

    $('#table').on('keyup',  '.myfncaller', function(){
        var $this = $(this);
        var index = $this.data('index'), value = $this.data('value'), count = $this.data('count');
    })

    function dynamicContentAdd() {
        rowIndex++;
        count++;

        var row = "<input name='input[" + rowIndex + "]' id='input" + rowIndex + "'  type='text' class='inputfield myfncaller' data-index='" + rowIndex + "' data-value='" + total[1] + "' data-count='" + count + "' />";

        $("#table").append(row);
    }
})

edited Oct 17, 2013 at 2:40

answered Oct 17, 2013 at 2:34

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ujjwal Prajapati Over a year ago

Thank you. It worked indeed. I chose the second option of Solution1

kinsley kajiva Over a year ago

wow this has worked . well i have learnt something new , thanks @Arun P Johny

Collectives™ on Stack Overflow

Call a function from Dynamically added html code using jquery

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related