jQuery UI draggable doesn't work on created element

Question

Draggable function works on other already created elements, but not on the one i'm creating within a function after submit button. I've checked if i'm adding an id to 'li' elements and it works, so why can't I drag it? It works when I use it on whole 'ul' element.

HTML:

<div class="container">
  <form>
    <input type="text" id="entry">
    <button id="entryButton">button</button>
  </form>
  <ul id="list">
  </ul>
</div>





$("#entryButton").click(function(){
        event.preventDefault(); //stops refreshing
        var query = $("#entry").val();
        if (query !== "") {
            var registry = "<div id='drag'>" + query + "</div>"
            $("#list").append(registry)
            $("#entry").val("");
            return false; //also stops refreshing
            console.log(registry);
                           }
         })

    $("#drag").draggable({
      axis: "y"
      });

Answer 1

You can only use an id once, so I would suggest that you use class for that. Furthermore, you should add the draggable to the element after creation, as Ferhat BAŞ has said.

https://jsfiddle.net/exqn1aoc/2/

$("#entryButton").click(function(){
    event.preventDefault(); //stops refreshing
    var query = $("#entry").val();
    if (query !== "") {
        var registry = "<div class='drag'>" + query + "</div>"

        $("#list").append(registry);
        $('#list').children().last().draggable();
        $("#entry").val("");
        return false; //also stops refreshing
        console.log(registry);
                       }
     });

Answer 2

Just use class instead of id for multi pal created item to drag and put your draggable inside button click.

 $("#entryButton").click(function() { event.preventDefault(); //stops refreshing var query = $("#entry").val(); if (query !== "") { var registry = "<div id='drag' class='drag'>" + query + "</div>" $("#list").append(registry) $("#entry").val(""); $(".drag").draggable({ axis: "y" }); return false; //also stops refreshing console.log(registry); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> <div class="container"> <form> <input type="text" id="entry"> <button id="entryButton">button</button> </form> <ul id="list"> </ul> </div> 

Answer 3

First you need to put the draggable() function inside your click function.

Second, do not use id . Duplicate id's are not valid HTML and that's what causing only the first #drag to be draggable. Use class instead

See snippet below

 $("#entryButton").click(function() { event.preventDefault(); //stops refreshing var query = $("#entry").val(); if (query !== "") { var registry = "<div class='drag'>" + query + "</div>" $("#list").append(registry) $("#entry").val(""); $(".drag").draggable() return false; //also stops refreshing console.log(registry); } }) 

 .drag { height: 100px; width: 100px; background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> <div class="container"> <form> <input type="text" id="entry"> <button id="entryButton">button</button> </form> <ul id="list"> </ul> </div>