javascript - jquery getting data from data-href - Stack Overflow

admin管理员组

文章数量:1303668

I am trying to make a table row a link by using jQuery and this:

jQuery(document).ready(function() {
    $(".clickable-row").click(function() {
        window.location.href = $(this).data('href');
    });
});

In my html file i have this:

<tr class='clickable-row' data-href='my-page/user/123'>
    <td><span class="glyphicon glyphicon-user"></span></td>
    <td>{{ member.getFornamn }} {{ member.getEfternamn }}</td>
    <td>{{ member.getEmail }}</td>
    <td>{{ member.getTel1 }}</td>
    <td>{{ member.getPostadress }}</td>
    <td>{{ member.getPostnr }}</td>
</tr>

Nothing is happening. If i change to this: window.location.href = 'www.google'; it's working so I know WERE the problem is...

What am I missing?

Edit: Plunker:

For some reason above doesn't work for me. If I use this it works:

jQuery(document).ready(function() {
    $(".clickable-row").click(function() {
        window.location.href = '**any link at all**';
    });
});

But when i change to this my console log don't even recognize my click...??

jQuery(document).ready(function() {
    $(".clickable-row").click(function() {
        window.location.href = $(this).data('href');
    });
});

I am trying to make a table row a link by using jQuery and this:

jQuery(document).ready(function() {
    $(".clickable-row").click(function() {
        window.location.href = $(this).data('href');
    });
});

In my html file i have this:

<tr class='clickable-row' data-href='my-page./user/123'>
    <td><span class="glyphicon glyphicon-user"></span></td>
    <td>{{ member.getFornamn }} {{ member.getEfternamn }}</td>
    <td>{{ member.getEmail }}</td>
    <td>{{ member.getTel1 }}</td>
    <td>{{ member.getPostadress }}</td>
    <td>{{ member.getPostnr }}</td>
</tr>

Nothing is happening. If i change to this: window.location.href = 'www.google.'; it's working so I know WERE the problem is...

What am I missing?

Edit: Plunker: http://plnkr.co/edit/0MBucaxR1fDpYZjZRLHc?p=preview

For some reason above doesn't work for me. If I use this it works:

jQuery(document).ready(function() {
    $(".clickable-row").click(function() {
        window.location.href = '**any link at all**';
    });
});

But when i change to this my console log don't even recognize my click...??

jQuery(document).ready(function() {
    $(".clickable-row").click(function() {
        window.location.href = $(this).data('href');
    });
});

• javascript
• jquery
• html

Share Improve this question Follow edited Mar 12, 2017 at 19:44 Dunken asked Mar 12, 2017 at 19:20 DunkenDunken 10311 gold badge11 silver badge1010 bronze badges 9

• Does data-href attribute setted dynamically? – Mohammad Commented Mar 12, 2017 at 19:23
• try $(this).attr('data-href'); and $('body').on('click', '.clickable-row', function() { ..your code here.. }); – ibrahimyilmaz Commented Mar 12, 2017 at 19:23
• 2 Console log $(this).data('href') to ensure it is what you think it should be. Also maybe you need http:// at the start. – Alan P. Commented Mar 12, 2017 at 19:24
• @mohammad : Not now but it will be when it's working. – Dunken Commented Mar 12, 2017 at 19:27
• Cannot reproduce plnkr.co/edit/0MBucaxR1fDpYZjZRLHc?p=preview – guest271314 Commented Mar 12, 2017 at 19:27

 |  Show 4 more ments

1 Answer 1

Sorted by: Reset to default 6

I did this:

jQuery(document).ready(function() {
    $(".clickable-row").click(function() {

        thisdata = $(this).attr('data-href');
        console.log(thisdata);

        window.location.href = thisdata;
    });
});

And the console gave me the correct answer.

I noticed that my actual table looked like this:

<tr class='clickable-row' data-href='URL://my-page./user/123'>

So by removing the URL:// it works now.

Thand you for your help!

本文标签： javascriptjquery getting data from datahrefStack Overflow