How to pass value in a jQuery function without the help of onclick attribute?

Question

I am facing a problem in which I need to pass either one or multiple parameter to a javascript function. For example

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

But I am trying to avoid this onclick attribute from the html end. So I have used this way

<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>

And written the jQuery function like this to capture my click function from the link

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

But alas!! I am undone. This link works only for the first anchor Delete1 none of the anchors are working. Here is my jsFiddle link. I have gone through these answers Q1, Q2, Q3, Q4, Q5, Q6. Each of those question have the solution in the first way using onclick and passed the parameter to the function.I am thinking differently. Moreover my another question is, is there any way to pass parameter to a jQuery function without writing onclick in the html attribute? I know that jQuery function is capable to receive the parameter, but how can I send it to the function from the html end?

Id's are unique, classes may be duplicate. you should give the same class for each three anchor tags, and fire the event on class not id — RAUSHAN KUMAR, Jul 27 '17 at 12:31

Alive to die - Anant · Accepted Answer · 2017-07-27T13:15:40.130

Instead of id use class selector:-

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

Working demo:-

$(".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>

Note:-

id used as unique-selector in jQuery,while class used as a group-selector

vjy tiwari · Answer 2 · 2017-07-27T12:37:40.343

You can use this way

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

score 1 · Answer 3 · edited Jul 27 '17 at 12:50

1

You can get the value of an HTML object directly in javascript without passing it with onclick using:

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

edited Jul 27 '17 at 12:50

Mohideen bin Mohammed

18,813
10
112
118

answered Jul 27 '17 at 12:35

IcedAnt

444
3
12

How to pass value in a jQuery function without the help of onclick attribute?

3 Answers3