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