Javascript jquery ui-（滑块）自定义事件绑定不工作

我有一点问题，为什么我的自定义事件不能触发和工作正常。。。我的自定义事件应该附加到每个列，如何使滑块仅绑定到一个列（下面的cols对象）？使用当前代码，如果我单击任何列，所有列的大小都会调整

我尝试使用在小div内打开的滑块动态调整表列的大小，如果单击一个表，则加载我的小对话框，然后获取所有当前列宽并添加事件处理程序。我的代码是：

//param: data = current table
function DisplayColumnData(data) {

    var cols = $(data).find("col");

   //attach slider to each col
    $(cols).each(function(i) {

            var that = this;

            var coldata = $("<div class='ui-col-data' />"); 
            var colvalue = $("<span class='ui-col-value' />");
                colvalue.text($(that).attr("width"));

            coldata.text(" >col" + i + ": ").append(colvalue);

            $(".ui-resizer-cols").append(coldata);

            //handle column resizing, bind each col to the slider...
            $(coldata).click(function() {
                $(".ui-col-data").unbind("resizehandler");
                //remove all other binded events then trigger the new event only...
                $(coldata).trigger("resizehandler", that);
            });

    });

}

$(".ui-col-data").live("resizehandler", function(event, data) {
    var $parent = $(this).closest(".ui-resizer-cols");

    //remove classes from all other cols so only the clicked col is resized
    $parent.find(".ui-col-data").removeClass("ui-col-border");
    $parent.find(".ui-col-value").removeClass("ui-resizer-val");

    $(this).addClass("ui-col-border"); //now the active col   

    var valfield = $(this).find("span.ui-col-value");
    valfield.addClass("ui-resizer-val");


    //update whatever...
    $("#ui-resizer").slider('value', valfield.text() );
    $("#ui-resizer").bind("slide", function(e, ui) {
        valfield.text(ui.value);
        $(data).attr("width", ui.value); //update col
    });

});

//参数：data=当前表
函数DisplayColumnData（数据）{
var cols=$（数据）.find（“col”）；
//将滑块连接到每个列
$（cols）。每个（函数（i）{
var=这个；
var coldata=$（“”）；
var colvalue=$（“”）；
colvalue.text（$（that.attr（“宽度”））；
coldata.text（“>col”+i+：”）.append（colvalue）；
$（“.ui resizer cols”）.append（coldata）；
//处理列大小调整，将每个列绑定到滑块。。。
$（coldata）。单击（函数（）{
$（“.ui列数据”）.unbind（“resizehandler”）；
//删除所有其他绑定事件，然后仅触发新事件。。。
$（coldata）.trigger（“resizehandler”，即）；
});
});
}
$（“.ui col data”）.live（“resizehandler”，函数（事件，数据）{
var$parent=$（this）.closest（“.ui resizer cols”）；
//从所有其他列中删除类，以便只调整单击的列的大小
$parent.find（“.ui列数据”）.removeClass（“ui列边框”）；
$parent.find（“.ui col value”）.removeClass（“ui resizer val”）；
$（this）.addClass（“ui列边框”）；//现在是活动列
var valfield=$（this.find（“span.ui col value”）；
addClass（“ui resizer val”）；
//更新任何东西。。。
$（“#ui resizer”）.slider（'value'，valfield.text（））；
$（“#ui resizer”）.bind（“幻灯片”，函数（e，ui）{
文本（ui.value）；
$（data.attr（“width”，ui.value）；//更新列
});
});

表:

<table>
<colgroup>
      <col width="25%">
      <col width="25%">
      <col width="25%">
      <col width="25%">
</colgroup>
<tbody>
<tr>...</tr>// 4 td's here as normal
<tr>...</tr>
</tbody>
</table>

…//4 td在这里，一切正常
...

滑块：

<div class="ui-resizer-content">
        <div id="ui-resizer" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
        <div class="ui-slider-range ui-slider-range-max ui-widget-header" style="width: 100%;"></div><a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 0%;"></a></div>
        <div class="ui-resizer-cols"></div>

           <p> <a href="#" id="lnkResizer" style="float: right;">close</a>
        </p>
    </div>

这在文档中不是很清楚（至少对我来说），但修复方法是：

 $("#ui-resizer").slider({
                    slide: function(e, ui) {
                        valfield.text(ui.value + "%");
                        $(column).attr("width", ui.value); //update col
                    }
                });

显然，我使用的代码（下面）对于使用单个处理程序的所有滑块都是全局的，而上面的修复是特定于滑块实例的？（如果我理解正确）

---

您也可以共享相关的html吗？除了表和滑块外，所有html都是动态填充的，我将更新…主要问题是为什么滑块事件更新多个列，如果我只选择一列，它将很好地更新，但是如果我选择列2，则两列宽度一起更新。。。

$("#ui-resizer").bind("slide", function(e, ui) { ... }