Question

我正在使用表单加载新元素。加载元素后，我需要使每个元素都可拖动。根据.on doc “委托事件的优势在于它们可以处理来自以后添加到文档中的后代元素的事件。”

我已经尝试了很多.on，.click等等的变种，但到目前为止还没有运气。我目前正在与......合作。

    $('#parent').on('change', '.thumb', function(event){
        alert('loaded');
        $('.thumb').draggable();
    });

...但是，它没有附加到新的.thumb元素。我怎么能做到这一点？

编辑：这是html ...

        <input type="file" id="parent" name="files[]" multiple />
        <output> //these spans are created after files are selected from 'file'
            <span><img class=".thumb" src="..."></span>
            <span><img class=".thumb" src="..."></span>
        </output>

Answer 1

当你使用一个需要在插件中绑定自己的事件和DOM操作的插件时，像on（）这样的委托方法是没用的。

当你加载新元素时，你需要调用draggable（）方法，例如成功回调ajax。

如果您使用的是load（）

 $('#myDv').load( url, function(){

   /* new html has been inserted now */

    /* in case any other active draggables will only search within $('#myDiv') for new elements that need to be called*/
     $(this).find('.dragClass').draggable();

 })

Answer 2

我没有足够的细节专门回答这个问题，所以我会试着猜出问题是什么。

您正在将此函数绑定到ID为“parent”的元素的事件“change”。 “更改”功能仅适用于某些DOM元素，即input，textarea和select。（http://api.jquery.com/change/）这意味着如果id为“parent”的元素除了那三个标签之外的任何内容，那么change事件永远不会触发。

如果这是问题，我建议将.draggable（）方法移动到您添加“带表单的元素”的相同位置。

Answer 3

试试这个：

$('#parent').live('change', '#child', function(event){
    alert('loaded');
    $('#child').draggable();
});

如何使用jquery创建可拖动的新元素？

3 个答案: