value
属性にonClick
を定義するとき、次のような構文を知っています。
<button type="submit" onclick="alert('hi');"></button>
<button type="submit" onclick="doWork"></button> <!-- This one doesn't work -->
<button type="submit" onclick="doWork()"></button>
<button type="submit" onclick="doWork('Mike', 2)"></button>
私が興味を持っているのは、カスタムdata-attribute
そして、次のように値を実行します。
<button type="submit" data-callback="alert('hi');" class="marker"></button>
<button type="submit" data-callback="doWork" class="marker"></button>
<button type="submit" data-callback="doWork()" class="marker"></button>
<button type="submit" data-callback="doWork('Mike', 2)" class="marker"></button>
<script type="text/javascript">
jQuery("body").on("click","button.marker", function(e) {
var callback = jQuery(e.currentTarget).data("callback");
// Now I need to execute the callback no matter of the format
// 1. Execute as function's body
// 2. Or by function 'name'
// 3. Or by function 'name' with 0 parameters
// 4. Or by function 'name' with n parameters
})
function doWork(name, nr){
var personName = name || "Unnamed";
var personNr = nr || 0;
alert("Name is: " + personName + " Nr: " + personNr);
}
</script>
サンプルを jsBin に貼り付けました
より良いアイデアは、イベントを動的にバインドしてトリガーすることだと思います。他のコードでのみ認識されるようにしたい場合は、カスタムイベントを使用できます。
<button type="submit" class="marker marker1"></button>
<button type="submit" class="marker marker2"></button>
<button type="submit" class="marker marker3"></button>
<button type="submit" class="marker marker4"></button>
<script>
var $markers = $('.marker');
$markers.filter('.marker1').bind('customCallback', function(){ alert("hi"); });
$markers.filter('.marker2').bind('customCallback', function(){ doWork(); });
</script>
次に、他のコンポーネントは$(selector).trigger( 'customCallback');でそれらを呼び出すことができます。
と単に:
$("body").on("click","button.marker", function(e) {
eval($(this).data("callback"));
})
イベントとしてバインドせずに、あるものから別のものに関数(パラメーターの有無にかかわらず)を渡したい場合は、この方法で行うことができます(@Taplarの答えから始めました)
<button type="submit" class="marker marker1"></button>
<button type="submit" class="marker marker2"></button>
<button type="submit" class="marker marker3"></button>
<button type="submit" class="marker marker4"></button>
<script>
var $markers = $('.marker');
$markers.filter('.marker1').get(0).customCallback = doWork;
$markers.filter('.marker2').get(0).customCallback = function(){
doWork(arg0,arg1);
};
</script>
次に、他のコンポーネントで次のようにアクセスできます。
<script>
$('.marker').each(function(){
var thisFunction = $(this).get(0).customCallback;
//do something useful with thisFunction
});
</script>
関数をデータ属性としてバインドできます
const ele = $('button');
ele.data('onClick', evt => {
alert('bye');
})
ele.click(evt => {
const ele = $(evt.target);
ele.data('onClick')(evt);
})
別の方法は、window[func](args)
を使用することです。
eval()
と似ていますが、関数名と引数をHTML属性に別々に保存する必要があります。
以下に簡単な例を示します... CodePen
<button type="submit" data-func="Angel" data-args='use me instead of evil()' class="marker">TEST</button>
<script type="text/javascript">
//=== The Listener =====
$(".marker").on("click",function(){
// Get the function name and arguments
let func = $(this).attr("data-func");
let args = $(this).attr("data-args");
// Call the function
window[func](args);
})
//=== The Function =====
function Angel(msg){
alert(arguments.callee.name + " said : " + msg);
}
</script>