动态内容上的jQuery滑块，使用bind()不起作用

Question

我有以下代码，我试图在单击时向表中添加一行，在这个动态生成的行中，我想要一个jQuery UI滑块。行出现，但滑块未添加到分区中。…

我刚刚注意到，当我单击滑块出现的区域时，我认为这与绑定单击事件有关，我如何将其绑定为在表单元格区域中不单击的情况下出现？

$('.add_task').unbind().bind('click', function(){
    $('.add_cancel_wrap').html('<button class="cancel_add_task btn btn-primary">Cancel</button>');
    $('.cancel_add_task').unbind().bind('click', function(){
        window.location = window.location.href;
    });
    var user_id = $(this).data('user-id');
    var $html = $('<td></td><td><input class="description" type="text" value="" placeholder="Description" /></td><td><div class="time-slide"></div><div id="slide-range-area"></div></td><td></td><td><a href="" class="save_new_task" title="Save"><span class="glyphicon glyphicon-floppy-disk"></span></a></td><td><input class="time" /></td>');
    $html.bind('click', function(){
        $(function() {
            $(".time-slide").slider({
                range: false,
                min: 0,
                max: 480,
                step: 10,
                slide: function(e, ui) {
                    var hours = Math.floor(ui.value / 60);
                    var minutes = ui.value - (hours * 60);
                    if(hours.length == 1) hours = '0' + hours;
                    if(minutes.length == 1) minutes = '0' + minutes;
                    $('#slide-range-area').html(hours+' Hrs '+minutes+' mins');
                }
            });
        });
    });
    $('<tr></tr>').appendTo('#tasks_table').hide().append($html).fadeIn('slow');
});

感谢

Answer 1

不需要点击处理程序。。。您可以在创建dom元素后初始化插件，这样

$('.add_cancel_wrap').on('click', '.cancel_add_task', function () {
    window.location = window.location.href;
});
$('.add_task').unbind().bind('click', function () {
    $('.add_cancel_wrap').html('<button class="cancel_add_task btn btn-primary">Cancel</button>');
    var user_id = $(this).data('user-id');
    var $html = $('<tr><td></td><td><input class="description" type="text" value="" placeholder="Description" /></td><td><div class="time-slide"></div><div class="slide-range-area"></div></td><td></td><td><a href="" class="save_new_task" title="Save"><span class="glyphicon glyphicon-floppy-disk"></span></a></td><td><input class="time" /></td></tr>');
    $html.find(".time-slide").slider({
        range: false,
        min: 0,
        max: 480,
        step: 10,
        slide: function (e, ui) {
            var hours = Math.floor(ui.value / 60);
            var minutes = ui.value - (hours * 60);
            if (hours.length == 1) hours = '0' + hours;
            if (minutes.length == 1) minutes = '0' + minutes;
            $html.find('.slide-range-area').html(hours + ' Hrs ' + minutes + ' mins');
        }
    });
    $html.hide().appendTo('#tasks_table').append().fadeIn('slow');
});

还有一些与add_cancel_wrap 的委托事件处理程序有关的小更改