将事件处理程序附加到动态元素

时间:2011-08-03 01:16:40

标签: jquery event-handling

首先我有一些小工具,我可以拖放它们也可以排序。每个小部件都有一个删除按钮。我想要实现的是,其中一个小部件有一个添加按钮。当我点击添加新的小部件按钮时,我想按原样克隆第一个小部件并添加到列表的底部。到目前为止它的作用。我能够克隆小部件,但我使用克隆(true),它允许关闭按钮功能完美的克隆关闭按钮。问题是我无法拖放克隆的项目。我错过了什么?

提前谢谢。

感谢您的回复。但它对我没用。

以下是代码的一部分;

 makeSortable : function () {
    var iNettuts = this,
        $ = this.jQuery,
        settings = this.settings,

        $sortableItems = (function () {
            var notSortable = '';
            $(settings.widgetSelector,$(settings.columns)).each(function (i) {
                if (!iNettuts.getWidgetSettings(this.id).movable) {
                    if(!this.id) {
                        this.id = 'widget-no-id-' + i;  
                    }
                    notSortable += '#' + this.id + ',';

                }



            });

            var result = $('> li:not(' + notSortable + ')', settings.columns);


            return result;
        })();

    $sortableItems.find(settings.handleSelector).css({
        cursor: 'move'
    }).mousedown(function (e) {

        $sortableItems.css({width:''});
        $(this).parent().css({
            width: $(this).parent().width() + 'px'
        });

    }).mouseup(function () {
        if(!$(this).parent().hasClass('dragging')) {
            $(this).parent().css({width:''});



        } else {
            $(settings.columns).sortable('disable');
        }
    });

    $(settings.columns).sortable({
        items: $sortableItems,
        connectWith: $(settings.columns),
        handle: settings.handleSelector,
        placeholder: 'widget-placeholder',
        forcePlaceholderSize: true,
        revert: 300,
        delay: 100,
        opacity: 0.8,
        containment: 'document',
        start: function (e,ui) {
            $(ui.helper).addClass('dragging'); 



        },
        stop: function (e,ui) {
            $(ui.item).css({width:''}).removeClass('dragging');
           $(settings.columns).sortable('enable');

这是我在互联网上找到的现成代码之一。

第一次在浏览器上查看时,我可以看到6个小部件。我想克隆它们中的任何一个并动态添加。

谢谢

1 个答案:

答案 0 :(得分:2)

他们可能错过了正确的事件处理程序。当您最初绑定窗口小部件的事件处理程序时,您可能在选择的窗口小部件上使用了mousedown()等。但是,这只会绑定jQuery在执行语句时找到的那些小部件。

如果您还希望绑定动态创建的对象,则需要使用live()来绑定事件。

所以而不是

$('.widget').mousedown(function(){...});`

待办事项

$('.widget').live("mousedown", function(){...});