div not firing onclick event in javascript

Question

my div element is :

<div id="div"></div>

below is javascript.:

function makediv() {
        var divmy = document.getElementById("div");
        var row ='';
        var color='#ccc';
        for(var i=0;i<2;i++) 
        {
divmy.innerHTML += " <div class='dynamic' id='inner"+i+"' onclick=searchFilterations(i)>"+i+"</div> ";
            color='black';
        }
    }
    function searchFilterations(e){
    alert(e);
    }

problem is: searchFilterations() function not firing on click.what is the error? here is fiddle : http://jsfiddle.net/cjT4s/4/

Answer 1

Please call makediv function onload event

window.onload = makediv;

function makediv() {
    var divmy = document.getElementById("div");
    var row ='';
    var color='#ccc';
    for(var i=0;i<2;i++) 
    {    

    //    divmy.innerHTML += " <div style='width: 100px;height: 30px;background-color:"+color+" ;' onclick=javascript:alert("+i+")></div> ";

         divmy.innerHTML += " <div class='dynamic' id='inner"+i+"' onclick=searchFilteration("+i+")>"+i+"</div> ";
        color='black';
    }
}
function searchFilteration(i){
alert(i);
}

FIDDLE DEMO

Answer 2

Try this with window.searchFilteration = function (i) { ... } :

makediv();

function makediv() {
    var divmy = document.getElementById("div");
    var row ='';
    var color='#ccc';
    for(var i=0;i<2;i++) 
    {    
         divmy.innerHTML += " <div class='dynamic' id='inner"+i+"' onclick='searchFilteration("+i+")'>"+i+"</div> ";
        color='black';
    }
}
window.searchFilteration = function (i){
alert(i);
}

FIDDLE DEMO