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: stackoverflow.com/questions/203198/… — Satjinder Singh Bath
– Satjinder Singh Bath, Commented Jul 19, 2011 at 5:38
@Satjinder Singh Bath - this is a function scope issue, not a listener binding issue. — RobG
– RobG, Commented Jul 19, 2011 at 5:56

RobG · Accepted Answer · 2011-07-19 05:49:42Z

1

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.

answered Jul 19, 2011 at 5:49

RobG

148k32 gold badges180 silver badges216 bronze badges

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

1 Comment

dirk Over a year ago

That solves it. Thank you very much for your effort! Really appreciated ;-)

Collectives™ on Stack Overflow

JavaScript generated HTML with onClick doesn't trigger function

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related