jQuery UI Draggable在創建的元素上不起作用

Question

Draggable函數可用於其他已創建的元素，但不適用於我在Submit按鈕后在函數內創建的元素。 我已經檢查過是否要向'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。 此外，正如FerhatBAŞ所說，應該在創建后將可拖動對象添加到元素中。

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來創建由多朋友創建的項目即可將其拖放到按鈕單擊內部。

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

首先，您需要將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>