jquery ui-（滑块）自定义事件绑定不起作用

我有一个问题，找出为什么我的自定义事件不会触发并正常工作......我的自定义事件应附加到每一列，我怎么能得到滑块只能绑定到一列（cols下面的对象）？用我目前的代码，如果我点击任何col col cols are resized ...jquery ui-（滑块）自定义事件绑定不起作用

我想动态调整表格列使用一个滑块，打开里面的小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 
    }); 

});

表：

<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>

滑块：

<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>

来源

2011-04-30 Haroon

你能分享相关的html吗？ – 2011-04-30 13:47:02

所有的HTML都被动态地填充，除了表格和滑块我将更新... – Haroon 2011-04-30 14:39:22

主要问题与滑块事件更新多于一列的原因有关，如果我只选择一列，它会更新它但是，如果我选择列2，那么2列宽度一起更新... – Haroon 2011-04-30 14:48:21

这不是很清楚（至少对我来说）从文档，但解决方法是：

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

Apparantly在我使用（见下文）的代码是全球使用单一处理器的所有滑块和修复以上是特定于滑块的实例吗？（如果我理解正确）

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

来源

2011-04-30 15:39:04 Haroon

jquery ui-（滑块）自定义事件绑定不起作用

回答

相关问题