Passing element attribute to JQuery event

Question

I have an html page with several hyperlinks on it that share the same id but have a custom property linkID that differs. I know it is not a good practice but that is not something I can change at this point. I need to open a modal dialog box whenever a link is clicked. For that I am using JQuery. Now I need to pass the linkID property to the Jquery function. I tried using $("#hlk1").attr("LinkID") and $(this).attr("LinkID") but neither worked. It comes up as "undefined".

<html>
<head>
<script src="Script\jquery-2.2.0.js"></script>
<script src="Script\jquery-ui-1.8.24.js"></script>
<script>
$( document ).ready(function() {
    $("#hlk1").click(function(){ 
        var linkId=$("#hlk1").attr("LinkID");
        // initialize dialog
        var dlg = $("#dialog").dialog({ 
            autoOpen: false, height: 500, width: 350
        });

        // load content and open dialog
        dlg.load('page2.html?id=' + linkId).dialog('open');
    });
});

 </script>

</head>
<body>
<a href="#" id="hlk1" linkID="305">Click here</a>
<a href="#" id="hlk1" linkID="890">Click here</a>
<div id="dialog">

</div>
</body>
</html>

Stopped reading at "...share the same id" <- that's an error! — adeneo
– adeneo, Commented Feb 8, 2016 at 20:49
Check your case. You have linkID with a lowercase "L" in the a tag but LinkID in your jQuery has an uppercase "L". — Tim Southard
– Tim Southard, Commented Feb 8, 2016 at 20:49
Don't use custom attributes. Use data-linkID intead of linkID. — Barmar
– Barmar, Commented Feb 8, 2016 at 21:24

Darren · Accepted Answer · 2016-02-08 20:51:12Z

3

You need to use linkID not LinkID:

var linkId= $("#hlk1").attr("linkID");

You should also take advantage of using the data attributes.

As an additional note you may have issues with selecting multiple elements with the same identifier with jQuery, therefore it may be better to use a class and attach a handler.

HTML:

<a href="#" class="hlk1" linkID="305">Click here</a>
<a href="#" class="hlk1" linkID="890">Click here</a>

jQuery:

$(".hlk1").on("click", function() {
   var linkId = $(this).attr("linkID");
});

edited Feb 8, 2016 at 20:51

answered Feb 8, 2016 at 20:49

Darren

71.2k24 gold badges141 silver badges146 bronze badges

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

Comments

charlietfl · Accepted Answer · 2016-02-08 20:50:36Z

2

You can't repeat ID's in a page so use class instead. Then inside the click handler this is the element that event occurred on

<a href="#" class="hlk1" linkID="305">Click here</a>
<a href="#" class="hlk1" linkID="890">Click here</a>

JS

 $(".hlk1").click(function(){ 
        var linkId=$(this).attr("linkID");
        // initialize dialog
        var dlg = $("#dialog").dialog({ 
            autoOpen: false, height: 500, width: 350
        });

        // load content and open dialog
        dlg.load('page2.html?id=' + linkId).dialog('open');
    });

answered Feb 8, 2016 at 20:50

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Comments

Cedric Ipkiss · Accepted Answer · 2016-02-08 20:58:06Z

0

You need the .data() method. Also use data-attributes properly (data-linkId = "305")

$( document ).ready(function() {
    $("#hlk1").click(function(){ 
        var linkId=$(this).data("LinkID");
        // initialize dialog
        var dlg = $("#dialog").dialog({ 
            autoOpen: false, height: 500, width: 350
        });

        // load content and open dialog
        dlg.load('page2.html?id=' + linkId).dialog('open');
    });
});

answered Feb 8, 2016 at 20:58

Cedric Ipkiss

6,5457 gold badges52 silver badges79 bronze badges

1 Comment

Coding Duchess Over a year ago

$(this).data("LinkID") still came up as undefined

Collectives™ on Stack Overflow

Passing element attribute to JQuery event

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related