Html 第二次ajax调用不起作用_Html_Ajax_Highcharts

Html 第二次ajax调用不起作用

html ajax highcharts

Html 第二次ajax调用不起作用,html,ajax,highcharts,Html,Ajax,Highcharts,这是我的页面代码，当我第一次点击按钮工作时：我看到了关于的问题，但我无法解决我的问题 <html> <head> <title>tsee</title> <script src="jquery.js" type="text/javascript"></script> <script> $(document).ready(func

这是我的页面代码，当我第一次点击按钮工作时：

我看到了关于的问题，但我无法解决我的问题

  <html>
            <head>
            <title>tsee</title>
    <script src="jquery.js" type="text/javascript"></script>
    <script>
        $(document).ready(function () {

            $("#btn").click(function () {
                $.ajax({
                    URL: "../../generate", //this read from a servlet
                    type: "get",

                    data:{
                        id:120
                    },

                    cache: false,
                    complete: function () { alert('farshid') },
                    success: function (data) {
                        $('#result').html(data);
                    },
                    error: function () {
                        alert('Error')
                    }


                })

            })
        });
    </script>
</head>
<body>
    <input type="button" id="btn" value="Ajax Request" />
    <div id="result">

    </div>
</body>
</html>

当我点击按钮时，我的结果加载到div中，在这个div中绘制图表，因为避免了大量代码，所以我避免在这里编写代码，第二次点击“不工作”

我怎样才能解决这个问题？

为了更好地理解这个问题，这是一段视频。

我想你们可以试试。在“单击”上，函数{//你们的代码}而不是简单的。单击函数

可能是一个有约束力的问题。。。。单击将事件绑定到按钮的次数与单击次数相同。尝试或者使用$element.onclick函数{do stuff here}

或者在你执行完任务后点击按钮解除绑定

回答错误…道歉查看视频和JSFIDLE后，问题与按钮无关

如果您打开了控制台，您会发现在设置HighCharts插件的选项时出现了问题

您尝试将颜色从平面更改为渐变，但每次尝试绘制图表时都会运行此代码

这段代码假设初始颜色是十六进制值，但第二次运行时它不是十六进制，因为在第一次运行时更改了它们，这会导致插件崩溃并停止执行，因此它永远不会到达绘制图表的部分

请参阅演示：

您需要从该函数中删除HighChart颜色设置，并在加载页面时仅运行一次

请参阅工作演示：

因此，请从成功方法中删除以下代码

Highcharts.getOptions().colors = Highcharts.map(
    Highcharts.getOptions().colors,

    function (color) {
        console.log(color);
        return {
            radialGradient: {
                cx: 0.5,
                cy: 0.3,
                r: 0.7
            },
            stops: [
                [0, color],
                [
                1,
                Highcharts.Color(color)
                    .brighten(-0.3)
                    .get('rgb')] // darken
                ]
        };

而且只会成功一次

<script>
    $(function(){
    Highcharts.getOptions().colors = Highcharts.map(
        Highcharts.getOptions().colors,

            function (color) {
                console.log(color);
                return {
                    radialGradient: {
                        cx: 0.5,
                        cy: 0.3,
                        r: 0.7
                    },
                    stops: [
                        [0, color],
                        [1, Highcharts.Color(color)
                            .brighten(-0.3)
                            .get('rgb')] // darken
                        ]
                };    
          });
    });
</script>

您的整个页面html将在此div上重新加载。因此，您的按钮也将使用相同的id再次创建。您的单击将在第一个按钮id上运行。也请尝试此$btn。在“单击”上，函数{}；似乎有效：请在首次加载abc.html文件后检查。然后，js也加载了这个与现有页面冲突的abc.html页面。这可能是第二次它不起作用了。@lakhan，你怎么知道ajax加载的是同一个页面？除此之外，结果放在result div中，因此外部按钮不受影响。您说您隐藏了一些图表绘图的代码，但这可能就是问题所在。。因此，我建议您也在这里或在pastebin/jsfiddle/etcCan上发布该代码。您可以尝试在window.onload函数中调用函数，而不是在document中调用。ready@jango为什么？这会有什么区别呢？只有在所有元素都加载到dom中之后才会调用Window.onload。页面加载时调用ready函数。@jango调用dom ready时，html已经可用，用于将事件绑定到它。Load等待外部资源，如图像等。由于按钮在html中已可用，因此此处不会有任何区别。不，不会。请阅读有关的文档。在发布错误答案之前单击。添加此部分并仅运行一次。。到$ducument.readyfunction{//我将前面提到的内容粘贴到此处，现在就可以使用了}//函数thanU{alert'thanku'；}