Создание элемента перетаскивания после preend?

Question

У меня есть функция, которая показывает уведомление, и я хочу, чтобы это уведомление было перетаскиваемо, когда оно добавлено на страницу.

Я в настоящее время главный родительский DIV для хранения всех дивы уведомлений под названием notification_holder

Полная вещь:

<div class="notification_holder"> 
    <div class="container"><br><br><br> 
     <div class="col-md-4"></div> 
     <div class="col-md-4" id="notification_area"> 
      <!-- Notificiations will automatically be added here. --> 
     </div> 
     <div class="col-md-4"></div> 
    </div> 
</div> 

функция SendNotification:

function showNotification_event(notificationTitle, notificationContent) { 
    var notificationArea = $('#notification_area'); 

    var notificationHtml = '<div id="draggable" class="panel panel-pink">'; 
    notificationHtml += '<div class="panel-heading">'; 
    notificationHtml += notificationTitle; 
    notificationHtml += '</div>'; 
    notificationHtml += '<div class="panel-body">'; 
    notificationHtml += notificationContent; 
    notificationHtml += '</div>'; 
    notificationHtml += '</div>'; 

    $("#notification_area").prepend(notificationHtml); 

} 

и я заявляю об этом на старте файла .js:

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

У меня есть все файлы, прежде чем люди говорят, что:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 

Проблема в том, что просто не перетаскиваемом, кто может помочь с этим?

Answer 1

Вы можете привязывать события к элементам после их создания.

Это может помочь вам:

function showNotification_event(notificationTitle, notificationContent) { 
 
    var notificationArea = $('#notification_area'); 
 
    debugger; 
 
    var notificationHtml = '<div id="draggable" class="panel panel-pink">'; 
 
    notificationHtml += '<div class="panel-heading">'; 
 
    notificationHtml += notificationTitle; 
 
    notificationHtml += '</div>'; 
 
    notificationHtml += '<div class="panel-body">'; 
 
    notificationHtml += notificationContent; 
 
    notificationHtml += '</div>'; 
 
    notificationHtml += '</div>'; 
 

 
    notificationArea.prepend(notificationHtml); 
 
    $("#draggable").draggable(); 
 
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 

 
<div class="notification_holder"> 
 
    <div class="container"><br><br><br> 
 
     <div class="col-md-4"></div> 
 
     <div class="col-md-4" id="notification_area"> 
 
      <!-- Notificiations will automatically be added here. --> 
 
     </div> 
 
     <div class="col-md-4"></div> 
 
    </div> 
 
</div> 
 

 
<button id="click" onclick="showNotification_event('test title', 'test content')">button</button> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>