JavaScript generated HTML with onClick doesn't trigger function

Question

The script below adds items to an array when you click the link, and generates a list of items as html output. You can see an example here: http://jsfiddle.net/dqFpr/

I am trying to create a function to delete items from the list. Not a difficult task with splice(), but somehow clicking the delete link doesn't trigger the test_function() function.

Can someone tell me what I am doing wrong, or show me another way of triggering the function? Your help is really appreciated ;-)

<script language="javascript">
    $(document).ready(function() {
        function test_function( number ) {
            /* This function is not triggered, nothing works inside here!! */
        }
    });

    var lines = [];
    function update_list( lines ) {
        var thecode = '';
        for(var i = 0; i < lines.length; i++) {
            thecode = thecode + lines[i] + ' <a onclick="javascript:test_function('+i+')" href="#">(delete)</a><br />';
        }
        $('div#display').html(thecode);
    }

    $('a#new').click(function() {
        lines.push('another line');
        update_list(lines); 
    });
</script>

<div id="display"></div>
<a href="#" id="new">Add a new line</a>

Please refer to this post: http://stackoverflow.com/questions/203198/jquery-event-binding-on-dynamically-created-elements — Satjinder Singh Bath, Jul 19 '11 at 05:38
@Satjinder Singh Bath - this is a function scope issue, not a listener binding issue. — RobG, Jul 19 '11 at 05:56

score 1 · Accepted Answer · answered Jul 19 '11 at 05:49

Because in the text assigned to display's innerHTML, *test_function* is just plain text that is evaluated by the HTML parser. At that point, its scope is global, not within the IIFE passed to $(document).ready(). You can fix that by making the function global:

$(document).ready(function(){

    window.test_function = function (number) { 
      // do stuff
    }
    ....
});

or

var test_function;
$(document).ready(function(){

    test_function = function (number) { 
      // do stuff
    }
    ....
});

Or whatever method you like to get access to the function. But while it is declared inside an anonymous function's scope, you can only get access to it from a function that has a closure to the variables in that scope.

That solves it. Thank you very much for your effort! Really appreciated ;-) — dirk, Jul 19 '11 at 05:55

JavaScript generated HTML with onClick doesn't trigger function

1 Answers1