javascript - jQuery UI 可拖动不适用于创建的元素

Question

Draggable 函数适用于其他已创建的元素，但不适用于我在提交按钮后的函数中创建的元素。 我已经检查过是否向“li”元素添加了 id 并且它有效，那么为什么我不能拖动它呢？ 当我在整个“ul”元素上使用它时它就起作用了。

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

你只能使用一个 id 一次，所以我建议你使用 class 。此外，您应该在创建后将可拖动元素添加到元素中，正如 Ferhat BAŞ 所说。

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);
                       }
     });