如何从highchart事件中的html元素触发jquery函数onchange

How to fire a jquery function onchange from an html element in highchart event on click?

本文关键字：元素 jquery onchange 函数 html highchart 事件      更新时间：2023-09-26

Highchart容器

 $('#container').highcharts({
              /// code goes here
              plotOptions:{
                series: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function() {
                                 //
                                 if(this.series.name=="Positive") {
                                    <%if(posTitle.get(0).equals("NoValue")){
                                        //do nothing
                                    }else{
                                    %>
                                    $report.html(
                                            '<table>'+
                                            '<tr><td><b>Sentiment</b></td><td><b>News</b></td><td><b>Date</b></td><td><b>News Courtesy</b></td><td><b>User Opinion</b></td></tr>' +
                                            <%   for(int tempTitle=0;tempTitle<1;tempTitle++){%>
                                            '<tr><td>'+this.series.name+'</td><td><a href='+"<%=posTitle.get(tempTitle)%>"+' target = "_blank">'+"<%=posNews.get(tempTitle)%>"+'</a></td><td>'+"<%=posDate.get(tempTitle)%>"+'</td><td>iproperty.com.sg</td><td>***<select class="check" id="op1" >***<option value="0.5" selected="selected">Positive</option><option value="1">Very Positive</option><option value="0">Neutral</option><option value="-0.5">Negative</option><option value="-1">Very Negative</option></select></td></tr>'+
                                            <%}%>
                                            '</table>');
                                    <%}%>
                                }

所以当我尝试在$report.html()中触发上面的onchange select时。它没有调用下面的函数。函数是这样的

$(document).ready(function() {
        $('.check').on('change',function ()
        {   alert(this);
            $.ajax({
                type: "post",
                url: "mainPageForOpinion.jsp", //this is my servlet
                data: {
                    output: $(this).val()
                },
                success: function(){
                    $('#output').html("Updated");
                }
            });
        });
    });

谁能帮帮我!由于

在$report.html(...)之后调用$(".check").change() -以确保在DOM中创建新元素后调用该更改

当您动态地使用class=check创建select标记时，您需要使用文档对象绑定更改事件。jQuery:

$(document).ready(function() {
        $(document).on('change','.check',function ()// bind change event using document object
        {   alert(this);
            $.ajax({
                type: "post",
                url: "mainPageForOpinion.jsp", //this is my servlet
                data: {
                    output: $(this).val()
                },
                success: function(){
                    $('#output').html("Updated");
                }
            });
        });
    });

问题是脚本应该在$report.html()中触发事件，因为$report.html()加载在onclick事件上。

小提琴:jsfiddle.net/H32qN/4

相关文章：