使用this._on()在jQuery UI Widget Factory中实时绑定事件

前端之家收集整理的这篇文章主要介绍了使用this._on()在jQuery UI Widget Factory中实时绑定事件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我目前正在开发一个级联树菜单.展开树项目时,它会在其下方创建新的< div>,也可以展开.我可以得到第一组< div>来绑定并因此扩展,但我似乎无法使用“this._on”方法自动绑定新创建的div.我正在寻找类似于live(),delegate()和on()的功能.

我已经在http://jsfiddle.net/vEAhq/的jsFiddle中发布了我的代码.

我在第60行的_setupEvents方法下设置了事件绑定.

回顾一下,在_create方法调用的refresh方法中创建的元素绑定没问题.它是在_expand方法中创建的元素,不会像我期望的那样受到约束.

在此先感谢您的时间.

$.widget( "custom.categoryMenu",{

    options: {
        links: null
    },_create: function() {
        this.refresh();
        this._on('.categoryNavigationExpandIcon',{
            click: function(event) {
                var $container = $(event.target).parent();
                if( ($container).data('expanded') === false ) {
                    this._expand($container);
                } else {
                    this._contract($container);
                }
            }
        });
    },refresh: function() {
        var $elm = this.element;
        var $newElem;
        var $itemTree = this.options.links;
        var $itemTreeRoot = sortObj( $itemTree['1'],'function',true );

        this._setupEvents();

        $.each( $itemTreeRoot,function( key,value ) {
            var ID = $itemTreeRoot[key];
            var label = key;
            $newElem = $( '
最佳答案
当您必须附加一些新创建的内容时,最好绑定文档上的事件,给定选择器或自定义事件.

例如,如果您尝试绑定给定类’.your-class’的点击:

$('.your-class').on('click',function (e) {
    // ...
})

您更愿意将其替换为:

$(document).on('click','.your-class',function (e) {
    // ...
})

它与jQuery UI完全相同:

你只想更换:

// Here you just bind a click on the existing elements of your class
this._on('.categoryNavigationExpandIcon',{
    click: function(event) {
        var $container = $(event.target).parent();
        if( ($container).data('expanded') === false ) {
            this._expand($container);
        } else {
            this._contract($container);
        }
    }
});

通过:

// Bind a custom event on the document in order to delegate this event event to the new created classes
this._on(this.document,{
    'click.categoryNavigationExpandIcon': function(event) {
        var $container = $(event.target).parent();
        if( ($container).data('expanded') === false ) {
            this._expand($container);
        } else {
            this._contract($container);
        }
    }
});

你可以在这里找到更新的JSFiddle:
http://jsfiddle.net/vEAhq/7/

顺便说一下,在使用jQuery创建元素时,可以跳过结束标记

$('
原文链接:https://www.f2er.com/jquery/428733.html

猜你在找的jQuery相关文章