Javascript jQuery UI可拖动不'；无法处理已创建的元素

Dragable函数可以在其他已经创建的元素上工作，但不能在submit按钮之后在函数中创建的元素上工作。 我已经检查了我是否正在向'li'元素添加id，它是否有效，那么为什么我不能拖动它呢？ 当我在整个“ul”元素上使用它时，它就工作了

HTML:

按钮


$（“#entryButton”）。单击（函数（）{
event.preventDefault（）；//停止刷新
var query=$（“#条目”）.val（）；
如果（查询！==“”）{
var registry=“”+查询+“”
$（“#列表”）.append（注册表）
$（“#分录”）.val（“”）；
return false；//同时停止刷新
console.log（注册表）；
}
})
$（“#拖动”）。可拖动({
轴：“y”
});

您只能使用一次id，因此我建议您使用类来实现这一点。此外，正如Ferhat BAŞ所说，您应该在创建之后将draggable添加到元素中

$（“#entryButton”）。单击（函数（）{
event.preventDefault（）；//停止刷新
var query=$（“#条目”）.val（）；
如果（查询！==“”）{
var registry=“”+查询+“”
$（“#列表”）。附加（注册表）；
$（'#list'）.children（）.last（）.draggable（）；
$（“#分录”）.val（“”）；
return false；//同时停止刷新
console.log（注册表）；
}
});

您只能使用一次id，因此我建议您使用类来实现这一点。此外，正如Ferhat BAŞ所说，您应该在创建之后将draggable添加到元素中

$（“#entryButton”）。单击（函数（）{
event.preventDefault（）；//停止刷新
var query=$（“#条目”）.val（）；
如果（查询！==“”）{
var registry=“”+查询+“”
$（“#列表”）。附加（注册表）；
$（'#list'）.children（）.last（）.draggable（）；
$（“#分录”）.val（“”）；
return false；//同时停止刷新
console.log（注册表）；
}
});

只需使用类而不是id来拖动多个pal创建的项目，并将可拖动的内容放入按钮单击中即可

$（“#entryButton”）。单击（函数（）{
event.preventDefault（）；//停止刷新
var query=$（“#条目”）.val（）；
如果（查询！==“”）{
var registry=“”+查询+“”
$（“#列表”）.append（注册表）
$（“#分录”）.val（“”）；
$（“.drag”）.draggable({
轴：“y”
});
return false；//同时停止刷新
console.log（注册表）；
}
})

按钮

只需使用类而不是id来拖动多个pal创建的项目，并将可拖动的内容放入按钮单击中即可

$（“#entryButton”）。单击（函数（）{
event.preventDefault（）；//停止刷新
var query=$（“#条目”）.val（）；
如果（查询！==“”）{
var registry=“”+查询+“”
$（“#列表”）.append（注册表）
$（“#分录”）.val（“”）；
$（“.drag”）.draggable({
轴：“y”
});
return false；//同时停止刷新
console.log（注册表）；
}
})

按钮

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

第二，不要使用

id

。重复的

id

不是有效的HTML，这导致只有第一个

#drag

可以拖动。改用类

请参阅下面的代码片段

$（“#entryButton”）。单击（函数（）{
event.preventDefault（）；//停止刷新
var query=$（“#条目”）.val（）；
如果（查询！==“”）{
var registry=“”+查询+“”
$（“#列表”）.append（注册表）
$（“#分录”）.val（“”）；
$（“.drag”）.draggable（）
return false；//同时停止刷新
console.log（注册表）；
}
})

。拖动{
高度：100px；
宽度：100px；
背景：红色；
}

按钮

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

第二，不要使用

id

。重复的

id

不是有效的HTML，这导致只有第一个

#drag

可以拖动。改用类

请参阅下面的代码片段

$（“#entryButton”）。单击（函数（）{
event.preventDefault（）；//停止刷新
var query=$（“#条目”）.val（）；
如果（查询！==“”）{
var registry=“”+查询+“”
$（“#列表”）.append（注册表）
$（“#分录”）.val（“”）；
$（“.drag”）.draggable（）
return false；//同时停止刷新
console.log（注册表）；
}
})

。拖动{
高度：100px；
宽度：100px；
背景：红色；
}

按钮

您应该在创建元素后使用draggable函数如果我把它放在函数中，只有第一个创建的元素是draggable的，因此您应该使用两次jhst copy它我尝试了各种可能性，但仍然只有一个第一个创建的元素是draggable的对不起，我的答案错了。我已经更新了它，现在它会正确地将draggable应用于所有新添加的元素。创建元素后，您应该使用draggable函数。如果我将它放在函数中，只有第一个创建的元素是可拖动的，因此您应该使用两次jhst copy itI我已经尝试了各种可能性，但仍然只有一个第一个创建的元素是可拖动的。对不起，我的答案错了。我已经更新了它，现在它将正确地将draggable应用于所有新添加的元素。

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

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