jquery - (JQuery) 如何在插件中设置事件

Question

我在 jQ 中尝试了一个简单的“插件”，如下所示：

$.fn.Lister = function(){
    var container = this;

    // Get some data
    $.get('xxxx', function(result){  

        // foreach result, fill in container. each result item fills as a button.
        $(result).each(function(){  
            $(container).append('<button>'+ this.Name +'</button>');
        });
    });
}

然后我在我的页面中调用它：

<div id="container"></div>

<script>
    $(document).ready(function() { 
        $('#container').Lister();
    });
</script>

它的作品〜对我来说很好，第一次尝试。

但是问题来了：点击 <button> 时如何收集价值？

在uploadify 插件中，文件选择事件是这样解决的：

$('#fileUploader').uploadify({ 
         'onSelect' : function(file){ alert(file.name); } 
});

如何在我的 Lister() 中模拟这个，如下所示？

<div id="container"></div>

<script>
    $(document).ready(function() { 
        $('#container').Lister({
            'onButtonClicked' : function(buttonText) { alert(buttonText); }
        });
    });
</script>

谢谢。

Answer 1

尝试

$.fn.Lister = function(options){
    var container = this;

    if(jQuery.isFunction(options.onButtonClicked)){
        container.on('click', 'button', options.onButtonClicked)
    }

    // Get some data
    $.get('xxxx', function(result){  

        // foreach result, fill in container. each result item fills as a button.
        $(result).each(function(){  
            $(container).append('<button>'+ this.Name +'</button>');
        });
    });
}

然后

$(document).ready(function() { 
    $('#container').Lister({
        'onButtonClicked' : function(e) { alert($(this).text()); }
    });
});