Jquery on click not working while passing data

Question

Question is very simple but due to some reason i am not able to fix it. Here is the a href tag that will open modal box.

<center><a href="javascript:void();" class="btn-home" data="<?php echo $cid;?>" data-toggle="modal" data-target="#ApplyModal" name="btn-classified" id="btn-classified" href="#">Apply</a></center>

Here is jquery to get id from data attribute.

<script type="text/javascript">
$('document').ready(function()
{
    $(document).on('click', '#btn-classified', function() {
    //$("#btn-classified").on("click", function () {
     //$("#btn-classified").click(function() {   
     var myvar1 = $(this).data('data');
     alert(myvar1);

});
});
</script>

For some reason i am not getting any output if i use $(document).on('click', '#btn-classified', function() { and if i use $("#btn-classified").on("click", function () { then i am getting undefined.

.data('data') will use the attribute data-data="", that's why you need to use Rui's answer — progysm
– progysm, Commented Jul 10, 2016 at 18:24

Rui Costa · Accepted Answer · 2016-07-10 18:36:09Z

3

To get 'data' attribute of <a> element use .attr() function of jQuery

  $('document').ready(function() {
    $(document).on('click', '#btn-classified', function() {
      var myvar1 = $(this).attr('data'); // .attr() to get attribute of an element
      alert(myvar1);
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' id='btn-classified' data='This an element of DOM'>Get this DATA value</a>

Your Code get undefined on event click when your call to an element which exist after of the function.

You need performance the logic of your code, on jQuery you want use

$(document).ready(function(){ 
 //your functions with selectors of DOM 
})

or use .on() function of jQuery to events.

$(document).on('click', '.mainButton', function(){
 //your code
})

edited Jul 10, 2016 at 18:36

answered Jul 10, 2016 at 18:22

Rui Costa

8004 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Roxx Over a year ago

Thanks for your answer. Voted up.

Rui Costa Over a year ago

Thanks to you. if this answer works for you choose as a correct

Rachel Gallen · Accepted Answer · 2016-07-10 18:26:59Z

3

You have two hrefs - one says javscript:void(); the other has a hash (#) Remove one. Then you won't get undefined.

answered Jul 10, 2016 at 18:26

Rachel Gallen

28.7k22 gold badges77 silver badges87 bronze badges

3 Comments

1sloc Over a year ago

That's not the problem. The problem is trying to access the data-attributes using a non-existing key.

Rachel Gallen Over a year ago

@JethroVanThuyne it doesn't help to confuse the matter by pointing it to two locations. One href should still be removed

Roxx Over a year ago

Nice catch i missed that one.

1sloc · Accepted Answer · 2016-07-10 18:26:01Z

1

You'll want to change data to data-id in your HTML. That way you can access the data properties in your javascript like so:

$('#btn-classified').on('click', function() {
  alert($(this).data('id'));
});

$(this).data('data') would actually expect data-data="<?=$someId?>" in your HTML.

answered Jul 10, 2016 at 18:26

1sloc

1,1806 silver badges12 bronze badges

1 Comment

Roxx Over a year ago

Thanks for your answer. Voted up.

Deep · Accepted Answer · 2016-07-10 18:33:51Z

1

As per the docs https://api.jquery.com/data/ the attribute should be data-data if it needs to be fetched through .data function.

$('document').ready(function()
{
$(document).on('click', '#btn-classified', function() {
//$("#btn-classified").on("click", function () {
 //$("#btn-classified").click(function() {   
 var myvar1 = $(this).data('data');
 alert(myvar1);
});
});

 <script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<body>
<center>
  <a href="#" class="btn-home" data-data="123" data-toggle="modal" data-target="#ApplyModal" name="btn-classified" id="btn-classified" >Apply
  </a>
  </center>
 </body>

answered Jul 10, 2016 at 18:33

Deep

9,7962 gold badges24 silver badges34 bronze badges

1 Comment

Roxx Over a year ago

Thanks for your answer. Voted up.

Rakesh Varma · Accepted Answer · 2016-07-10 18:37:30Z

1

Use .attr('data') instead of .data('data') functions because .data function is used to Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.

answered Jul 10, 2016 at 18:37

Rakesh Varma

1611 gold badge2 silver badges15 bronze badges

1 Comment

Roxx Over a year ago

Thanks for your answer. Voted up.

Collectives™ on Stack Overflow

Jquery on click not working while passing data

5 Answers 5

2 Comments

3 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

3 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related