onclick() jQuery/JavaScript Button to display piechart doesn't work

<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:

  • Javascript click on coordinates inside iframe
  • JavaScript Cross-Browser Click on a HTML DOM Element
  • Uncaught ReferenceError: Invalid left-hand side in assignment
  • jQuery dialog button how to set the click event?
  • Select entire Handsontable column with icon click?
  • Toggling click handlers in Javascript
  • $(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

  • jQuery click() on a nested div
  • JavaScript / jQuery only works on second click
  • JQuery: click everywhere but some element
  • .click function, remove class after clicked
  • e.preventDefault() not bulletproof?
  • PhantomJS; click an element
  • 2 Solutions collect form web for “onclick() jQuery/JavaScript Button to display piechart doesn't work”

    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");
        })
    });
    

    add a id attribute to the anchor link and then try… it will surely work

    in jquery # resembles the id of the element

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