CODEWITHSUNDEEP
javascriptphpjqueryfunctionjquery-selectors
John Brunner
John Brunner

Reputation: 2872

How provide js function with jquery $(this)

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.

Upvotes: 1

Views: 128

Answers (2)

MackieeE
MackieeE

Reputation: 11872

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/

Upvotes: 1

user2237814
user2237814

Reputation: 118

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

Upvotes: 1

Related Questions