Question

<a data-role="button" data-transition="flip" href="#feedbackmain" inline style="height:120px" type="button" name="feedbackLink">
        <img src="icons/report.png" inline style="height:80px"/><br/>Feedback
</a>

So I have this button as shown above and I am trying to trigger it to open a pie chart for me. Problem is that I can’t seem to get the button to work. I can also create the piechart upon webpage load if possible but haven’t been able to figure out how to do that either. My pie chart is made in jQplot and is generated like this:

function drawChart(data) {
     var data = data;

      var options = {
          title: 'Pie Chart',
          seriesDefaults: {
            renderer: jQuery.jqplot.PieRenderer,
            rendererOptions: {
              showDataLabels: true,
              dataLabels: 'value',
              fill: false,
              sliceMargin: 5,
              lineWidth: 5,
              startAngle: 45
            }
          },
          legend: { show:true, location: 'w' }
        };

      $.jqplot('chartDivId', data, options);
    }

Now, I tried calling the function like this:

$(document).ready(function()
    {
    drawChart([[["data1",6],["data2",5],["data3",2]]]);
})

I get a transparent box where the chart is supposed to be drawn, but … it’s transparent. I can make a button with an onClick function on the same div with data-role: page and get that to work, but I’d rather have it load on startup as I need the data1,data2,data3 parameters loaded from MySQL via PHP. I can’t even get contact with the button shown in the first snippet with the following code:

$("#feedbackLink").click(function()
        {
        alert("2");
        })
    });

Anyone know how to fix this? Either get the button to do it for me OR have the chart load automatically with the rest of the script.

EDIT: I even stripped it down to this:

$(document).ready(function()
    {
        $("#test").click(function()
        {
            alert("2");
        })
})

And the button:

<div data-role="page" id="page1">
    <input type="button" id="test" value="test"/>
</div>

I deleted basically everything else in the whole page, and still no damned contact :U

Answer 1

You need to add the id attribute to the anchor so you can handle the click event with JQuery

<a data-role="button" data-transition="flip" id="feedbackLink" href="#feedbackmain" inline style="height:120px" type="button" name="feedbackLink">
    <img src="icons/report.png" inline style="height:80px"/><br/>Feedback
</a>

also you need to make sure that your event handler is written in the $(document).ready()

$(document).ready(function(){
    $("#feedbackLink").click(function(){
      alert("2");
    })
});