jquery ui- (Schieberegler) Benutzerdefinierte Ereignisbindung funktioniert nicht

Question

Ich habe ein kleines Problem damit, herauszufinden, warum mein benutzerdefiniertes Ereignis nicht ausgelöst wird und nicht ordnungsgemäß funktioniert. Mein benutzerdefiniertes Ereignis sollte an jede Spalte angehängt werden. Wie kann ich erreichen, dass der Schieberegler nur an eine Spalte (Spalten) gebunden wird?Objekt unten)?Wenn ich mit meinem aktuellen Code auf eine Spalte klicke, wird die Größe aller Spalten geändert ...

Ich versuche, die Größe einer Tabellenspalte mithilfe eines Schiebereglers, der in einem kleinen Div geöffnet wird, dynamisch zu ändern. Wenn auf eine Tabelle geklickt wird, wird mein kleines Dialogfeld geladen, um die gesamte aktuelle Spaltenbreite abzurufen und einen Ereignishandler hinzuzufügen. Mein Code lautet:

//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
    });

});

TABELLE:

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

Schieberegler:

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

Answer 1

Dies war (zumindest für mich) aus der Dokumentation nicht so klar, aber das Update lautet:

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

Anscheinend ist der Code, den ich (unten) verwendet habe, für alle Schieberegler, die einen einzelnen Handler verwenden, global, und der obige Fix ist spezifisch für eine Instanz eines Schiebereglers?(wenn ich richtig verstanden habe)

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