onclick属性の助けを借りずにjQuery関数で値を渡す方法は？

Question

javascript関数に1つまたは複数のパラメータを渡す必要があるという問題に直面しています。たとえば、

<a href="#" OnClick="Delete(1,'q');" > X </a> 
<a href="#" OnClick="Delete(2,'u');" > X </a> 

しかし、私はこのonclick属性をHTMLエンドから回避しようとしています。だから私はこの方法

<a href="javascript://" title="Delete" id="actRemove" data-action="/List/Delete/1" ><span class="glyphicon glyphicon-remove"></span>Delete1</a> 
<a href="javascript://" title="Delete" id="actRemove" data-action="/List/Delete/2" ><span class="glyphicon glyphicon-remove"></span>Delete2</a> 
<a href="javascript://" title="Delete" id="actRemove" data-action="/List/Delete/2" ><span class="glyphicon glyphicon-remove"></span>Delete3</a> 

を使用し、リンク

$("#actRemove").each(function() { 
    $(this).on("click", function() { 
     alert($(this).data("action")); 
    }); 
}); 

しかし、悲しいかなから、私のクリック機能をキャプチャするために、このようjQuery機能を書かれています！私は元に戻す。このリンクは最初のアンカーに対してのみ機能しますDelete1アンカーのどれも動作していません。ここに私のjsFiddleリンクがあります。私はこれらの答えにつきましたQ1、Q2、Q3、Q4、Q5、Q6です。これらの質問のそれぞれは、最初の方法でonclickを使用して解決策を持ち、関数にパラメータを渡しました。私は異なった考え方をしています。さらに、私の別の質問は、は、 functionにパラメータを渡す方法がありますか？html属性にonclickという文字を書きませんか？私はjQuery関数がパラメータを受け取ることができることを知っていますが、どのようにhtmlの終わりから関数に送ることができますか？

Answer 1

代わりid使用のclassセレクタ： -

HTML： -

<a href="javascript:viod(0);" title="Delete" class="actRemove" data-action="/List/Delete/1" ><span class="glyphicon glyphicon-remove"></span>Delete1</a> 
<a href="javascript:viod(0);" title="Delete" class="actRemove" data-action="/List/Delete/2" ><span class="glyphicon glyphicon-remove"></span>Delete2</a> 
<a href="javascript:viod(0);" title="Delete" class="actRemove" data-action="/List/Delete/2" ><span class="glyphicon glyphicon-remove"></span>Delete3</a> 

のjQuery： -

$(".actRemove").on("click", function() { 
    alert($(this).data("action")); 
}); 

の作業のデモ： -

$(".actRemove").on("click", function() { 
 
    alert($(this).data("action")); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="javascript:viod(0);" title="Delete" class="actRemove" data-action="/List/Delete/1" ><span class="glyphicon glyphicon-remove"></span>Delete1</a> 
 
<a href="javascript:viod(0);" title="Delete" class="actRemove" data-action="/List/Delete/2" ><span class="glyphicon glyphicon-remove"></span>Delete2</a> 
 
<a href="javascript:viod(0);" title="Delete" class="actRemove" data-action="/List/Delete/2" ><span class="glyphicon glyphicon-remove"></span>Delete3</a>

注： - jQueryのでunique-selectorとして使用

id、classはgroup-selector

Answer 2

として使用しているときには、このよう

<a href="javascript://" title="Delete" id="actRemove_1" data-action="/List/Delete/1" ><span class="glyphicon glyphicon-remove"></span>Delete1</a> 
<a href="javascript://" title="Delete" id="actRemove_2" data-action="/List/Delete/2" ><span class="glyphicon glyphicon-remove"></span>Delete2</a> 
<a href="javascript://" title="Delete" id="actRemove_3" data-action="/List/Delete/2" ><span class="glyphicon glyphicon-remove"></span>Delete3</a> 



$("a[id^='actRemove_']").on("click", function() { 
    alert($(this).data("action")); 
}) 

を使用することができます0

Answer 3

あなたはonclickの使用とそれを介さずに直接JavaScriptでHTMLオブジェクトの値を取得できます。

var object_id = document.getElementById('object_id').value;