分类： Jquery/Javascript

echarts宽度 100px的问题 % px

在使用echarts的时候发现echarts的宽度变成了100px，明明设置的是100%,一般出现这种情况是在tab切换或者bootstrap的模态框里面，原因是当tab或者modal在隐藏的时候，无法获取到他的宽度值，echarts默认100px的宽度，我用的是bootstrap的modal,解决办法：

第一步、使用modal的shown.bs.modal方法获取弹出框的宽度。

官方文档：当模态框对用户来说可见时（需要等待CSS过渡完成），会触发该事件。如果是由点击引起的，被点击的元素是可用的，成为Event对象的relatedTarget属性。

第二步、使用echarts的resize方法，重新设置大小。

 $('#tree').on('shown.bs.modal', function () {
        myChart.resize({ width: $("#echarts").width(), height: 500 });
    })

jquery重复绑定导致的多次提交

$(function () {
        $("#callback").click(function () {
            $("#confirmBox").modal();
            $("#confirmBtn").click(function () {
                $.ajax({
                    type: 'POST',
                    url: "@Url.Action("Bill_CallBack", "bill")",
                    data: {billNo:'@Model.BillNo'},
                    success: function (r) {
                        $("#confirmBox").modal("hide");
                        msg(r.IsSuccess,r.Msg,"")
                    },
                        dataType: "Json"
                    })
        })
        })

    })

$(“#confirmBtn”).click的写法是绑定事件，第一次点提交没有问题，第二次点提交会发现数据被提交了两次，第三次点的时候数据会被提交三次…原因是按钮绑定了方法会重复执行，可以先解除绑定，也可以采用Jquery的one方法，如下，则不会有重复提交的情况。

$(function () {
        $("#callback").click(function () {
            $("#confirmBox").modal();
            $("#confirmBtn").one("click",function () {
                $.ajax({
                    type: 'POST',
                    url: "@Url.Action("Bill_CallBack", "bill")",
                    data: {billNo:'@Model.BillNo'},
                    success: function (r) {
                        $("#confirmBox").modal("hide");
                        msg(r.IsSuccess,r.Msg,"")
                    },
                        dataType: "Json"
                    })
        })
        })

    })