How provide js function with jquery $(this)

Question

I have a php site, and an external js file (where all my js functions are in it) and of course jquery.

At on link I want to call a js-function and provide this function with two variables, and after the function is finished I want to disable this link (visually).

PHP File

<a href="javascript:void(0);" 
   class="btn btn-primary btn-lg btn-circle btn-shadow btn-text btn-bookmark"
   onclick="bookmark_item( <?=$item_id;?>, <?=$user_id;?> );">
   <span class="icon_heart_alt"></span> Save
</a>

JS File

function bookmark_item(item_id, user_id);
    $(.btn-bookmark).attr('disabled','disabled');
    e.preventDefault();
    return false;
});

But instead of having this onclick="..." phrase in my a link I want to have a sleek $(document).on('click', 'a', function(){ ... }); function in my js file. But how is it possible to put a $(this) selector in my $(document).on... function? I need this to disable my a href button, and I have plenty of them, so hardcoding the ids or something similar would be really hard to accomplish.

The jQuery library ensures that `this` refers to the `` element that was clicked. You don't have to do anything special; that's just how it works. — Pointy, Dec 06 '13 at 18:45
ah... wasn't aware of that fact. i will try it. but how can i provide a `$(document).on(...)` function with two variables? or is this just possible with the `onclick="..."` statement? — John Brunner, Dec 06 '13 at 18:48
`$(document).on('click', 'a', function() { ... })` will cover **any** `` tag on the page. When an actual "click" event happens, the `` tag that was actually involved will be set up as the value of `this` when your handler is called. — Pointy, Dec 06 '13 at 18:52
You are trying to pass $item_id and $user_id into the javascript function? You can create your own attributes for that. In the PHP file you can add itemid="=$item_id;?>" for example and in your js function use $(this).attr("itemid"); to retrieve it. — user2237814, Dec 06 '13 at 18:52
@user2237814 thanks. i thought of that before, but than the `$user_id` variable is missing... — John Brunner, Dec 06 '13 at 18:53
$user_id can be an attribute userid="=$user_id;?>" just like your $item_id and retrieved with $(this).attr("userid");. As long as you don't use an attribute name that already has a use it will work fine. — user2237814, Dec 06 '13 at 18:55
@user2237814 ah ok, thanks. i will use it, though it depends on html5 to work properly — John Brunner, Dec 06 '13 at 18:59
It doesn't really depend on HTML5. Browsers will render it fine it just makes it 'invalid' which doesn't have many implication. You can read more [here](http://stackoverflow.com/questions/1735230/can-i-add-custom-attribute-to-html-tag). I added an answer to further clarify my comments. — user2237814, Dec 06 '13 at 19:04

MackieeE · Accepted Answer · 2013-12-06T19:10:29.577

if you wanted to actually target the current <a> generically out of many <a>'s when selecting an anchor, use the event that's passed through on .on('click)`:

<a data-example="test-london">London</a>
<a data-example="test-rome">Rome</a>
<a data-example="test-paris">Paris</a>

<script type="text/javascript">
    $(document).on('click', 'a', function( event ) {
        alert( $(event.target).attr( 'data-example' ));
    });
</script>

Fiffle: http://jsfiddle.net/hM4kC/

Although, I wouldn't suggest this at all normally. As this just an example on how you would pick the selected <a> anchor out of an jQuery object which is retrived from many results (for example, the current page would collect 138 Nodes! Which is an expensive operation, see below:)

enter image description here

It's much quicker, cleaner & semantic to stick to selecting by classes or ID, so in your case:

<a data-bookmark-item="2" data-userid="501" class="getbook">John Grisham</a>
<a data-bookmark-item="3" data-userid="551" class="getbook">J.K Rowling</a>
<a data-bookmark-item="4" data-userid="201" class="getbook">JRR Tolkien</a>

<script type="text/javascript">
    $(document).on('click', '.getbook', function() {
        var bookMark = $(this).data('bookmark-item'),
            userid = $(this).data('userid');

        console.log( bookMark + ' for user: '+ userId );
        somefunction( bookMark, userId ); //Pass them through to where needed.
    });
</script>

Where as you'd replace bookmark-item="4" with bookmark-item="<?=$item_id;?>" and utilising jQuery's .data() to collect relevant DOM information.

Fiddle: http://jsfiddle.net/N99B6/3/

thanks for the comment. i actually do select by class or ID. i just chose the general `` for the example here on stackoverflow — John Brunner, Dec 06 '13 at 19:01
@JohnBrunner Oh! Sorry! Well, then I guess the question is about collecting info with `$(this)` then, I'd use `.data()` or `.attr()` - Apolgoies for that =) — MackieeE, Dec 06 '13 at 19:02

score 1 · Answer 2 · answered Dec 06 '13 at 19:00

PHP File

<a href="javascript:void(0);" 
    class="btn btn-primary btn-lg btn-circle btn-shadow btn-text btn-bookmark"
    itemid="<?=$item_id;?>" 
    userid="<?=$user_id;?>">
    <span class="icon_heart_alt"></span> Save
</a>

JS File

$(document).on('click', 'a', function(){
    bootkmark_item(
        $(this).attr('itemid'),
        $(this).attr('userid'));
});
function bookmark_item(item_id, user_id);
    $(.btn-bookmark).attr('disabled','disabled');
    e.preventDefault();
    return false;
});

How provide js function with jquery $(this)

2 Answers2