Function not displaying when page is clicked on

Question

I have a Javascript function that creates a few list items in an unordered list when run, but when the page is called the onload event does not run the function, and it only works when I refresh the page. I tried putting an onclick function in the anchor tag that leads to the page, but that too does not run the function. I'm using JQuery mobile's UI to style and D3. I also tried .ready from JQuery, but that did not solve the problem either.

<div data-role="content">
<ul data-role="listview">
<li><a href="html/template/data.html" data-transition="slide">&nbsp;&nbsp;To Data</a></li>
</ul>
</div>

The D3 function is:

coolcat: function(){
        var AddedElem = d3.select("#YourData_ul").selectAll("li")
                .data(lines)
                .enter()
                .append("li")
                .attr("class", "ui-field-contain");
        AddedElem.append("label").text(function (d){ return d.itemname;}).attr("class", "information");
        AddedElem.append("input").attr("class", "input-deco");
        console.log("Just ran Coolcat!");

I previously put the "Onload" event in the data.html file, (Not in the index), and it did not work, so I put it in the index, and it would not display either. (It did run without a refresh)

Answer 1

It's probably linked to the order of loading of these libraries. You could avoid all that by using plain old JavaScript, which would look like this:

HTML:

<div data-role="content">
    <ul id="myListView" data-role="listview">
    <li><a href="html/template/data.html" data-transition="slide">&nbsp;&nbsp;To Data</a></li>
    </ul>
</div>

JavaScript:

var list = document.getElementById('myListView');

var listEntry = document.createElement('li');
listEntry.appendChild(document.createTextNode('new list text'));
list.appendChild(listEntry);

I haven't completed the rest of it, but if you call this javascript on your onload function, it'll definitely run.

You can also append your function to each of the list items using a standard DOM selector also.