【问题标题】:onclick() jQuery/JavaScript Button to display piechart doesn't workonclick() jQuery/JavaScript 按钮显示饼图不起作用
【发布时间】:2012-07-19 08:02:09
【问题描述】:
<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>

所以我有这个按钮,如上所示,我试图触发它为我打开一个饼图。问题是我似乎无法让按钮工作。如果可能的话,我也可以在网页加载时创建饼图,但我也无法弄清楚如何做到这一点。我的饼图是用 jQplot 制作的,生成方式如下:

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

现在,我尝试这样调用函数:

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

我在应该绘制图表的地方得到一个透明框,但是......它是透明的。我可以使用 data-role: page 在同一个 div 上创建一个带有 onClick 函数的按钮并让它工作,但我宁愿让它在启动时加载,因为我需要通过 PHP 从 MySQL 加载 data1、data2、data3 参数.我什至无法使用以下代码与第一个 sn-p 中显示的按钮取得联系:

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

有人知道如何解决这个问题吗?要么让按钮为我做这件事,要么让图表与脚本的其余部分一起自动加载。

编辑:我什至将其简化为:

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

还有按钮:

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

我基本上删除了整个页面中的所有其他内容,仍然没有该死的联系人:U

【问题讨论】:

  • 如何获取参数,它们是使用 ajax 读取还是作为 php 文件中的查询变量传递?
  • 还没有做那部分,首先我需要按钮来响应脚本的其余部分。
  • 你试过用 id 属性代替 name

标签: php javascript jquery click


【解决方案1】:

您需要将 id 属性添加到锚点,以便您可以使用 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>

您还需要确保您的事件处理程序写入 $(document).ready()

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

【讨论】:

  • 也已经尝试过了。只是似乎无法找到它们之间的联系:/
  • 您是否在 google chrome 或 firefox 中检查过控制台中的任何错误消息??
  • 最后。我现在发现了一个错误。在删除所有其他内容之前我确实尝试过它,它一直说官方 jQuery 文件有错误。但是现在我发现了一个 )} 应该是一个 }) 来关闭 document.ready。我得到了联系:D 非常感谢 ^^
【解决方案2】:

id 属性添加到锚链接,然后尝试...它肯定会工作

在 jquery 中 # 类似于元素的 id

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

【讨论】:

  • 也试过了,没有运气:/应该放在document.ready部分是吗?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-06-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-05-10
相关资源
最近更新 更多