Question

在我的html页面上，我有一个表，一旦点击一个按钮就动态添加了表行。这是它背后的代码。我想要做的是添加一个滑块到其中一个td。之后，我将获取该滑块的值并将其放入cookie中。我的问题是为什么这不起作用？

$(function(){
    $( "#tabs" ).tabs();
});

$(function() {
    $( document ).tooltip();
});

$(function () {
                $("#labSlider").slider(
                    {
                        orientation:"horizontal",
                        range:"min",
                        min: 0,
                        max: 25,
                        value: 15,
                        slide: function(event, ui){$("#amount").val(ui.value);}
                    }
                );
                $("#amount").val($("#labSlider").slider("value"));
            });


function labAddRow(){

    var labRows = $('#labTable tr').length;  //how many rows in table
        if (labRows <= 10){
            var newRow = $('<tr><td>' + labRows + '</td><td><div id ="labSlider"></div></td><td><input type="text" class="text_field" maxlength="2" size="2" onchange="calculateGrade()" title= "What did you score on lab '+ labRows+'?"/></td><td>' + "/25" + '</td></tr>');  //create the new row
            $('#labTable').append(newRow);

        }

}

Answer 1

将函数传递给jQuery会导致在DOM准备好时调用它。它不会自动执行DOM更改或类似的任何操作。

学会爱DOM！功能呢！您可以创建一个函数来为元素创建适当的滑块，然后在添加行时使用它。我不确定#amount是什么，但可能需要更正以匹配element。

$(function() {
    $('#tabs').tabs();
    $(document).tooltip();
});

function createSlider(element) {
    $(element).slider(
        {
            orientation:"horizontal",
            range:"min",
            min: 0,
            max: 25,
            value: 15,
            slide: function(event, ui){$("#amount").val(ui.value);}
        }
    );

    $("#amount").val($(element).slider("value"));
}

function labAddRow() {
    var labRows = $('#labTable tr').length;  //how many rows in table

    if (labRows <= 10) {
        var textField = $('<input>', {
            type: 'text',
            'class': 'text_field',
            maxlength: 2,
            size: 2,
            title: 'What did you score on lab ' + labRows + '?'
        }).on('change', calculateGrade);

        var slider = $('<div>', { id: 'labSlider' });

        var newRow = $('<tr>').append(
            $('<td>').text(labRows),
            $('<td>').append(slider),
            $('<td>').append(textField),
            $('<td>', { text: '/25' })
        );

        createSlider(slider);
        $('#labTable').append(newRow);
    }
}

无法动态添加功能

1 个答案: