jQuery動態內容滑塊，使用bind（）不工作

Question

我有下面的代碼，我試圖添加一行到單擊表中並在這個動態生成的行我想要一個jQuery UI滑塊。該行出現，但滑塊不添加到div ...

我剛剛注意到，當我點擊區域的滑塊出現，我認爲這必須做綁定點擊事件，我怎麼能綁定它在表格單元格區域中不出現點擊而出現？

$('.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