Question

Draggable函数适用于其他已创建的元素，但不适用于在提交按钮后在函数内创建的元素。我已经检查过我是否在“＆＃39; li”中添加了ID。元素和它的工作原理，为什么我不能拖动它？当我在整个＆＃39; ul＆＃39;元件。

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。此外，正如FerhatBAŞ所说，你应该在创建之后将draggable添加到元素中。

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

只需使用class而不是id为多个pal创建的项目拖动并将可拖动的内部按钮单击。

＆＃13;

$("#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);
  }
})

＆＃13;

<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>

＆＃13;

Answer 3

首先，您需要将draggable（）函数放在click函数中。

其次，请勿使用id。重复的id's不是有效的HTML，而这只是导致第一个#drag可以拖动的原因。使用类

请参阅下面的代码段

$("#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>

jQuery UI draggable不适用于创建的元素

3 个答案: