CODEWITHSUNDEEP
javascriptjqueryhtml
Muarif
Muarif

Reputation: 218

adding events in jquery plugin

I want to trigger simple alert when particular a tags clicked. This is my html code

<html>
<head>
<script src="js/modal-load.js"></script>
<script>
    $('.modal-link').modalLoad();
</script>
</head>
....
<body>
     <div class="hblock-1 text-4 text__uppercase color-7">
           <a class="login btn btn-primary modal-link" href="/login-modal.php" data-toggle="modal" data-target="#login-modal">Log in</a>
           <a href="index.html#" class="register btn btn-primary modal-link">Register</a>
     </div>
</body>

And below is my jquery plugin

(function($){
     $.fn.modalLoad = function(){
         var $t = $(this);
         $t.on('click',function(){
             alert($(this).attr('href'));
         });
     };
})(jQuery);

Nothing error there, but why alert is not triggered? And, is there any more simple jquery plugin structure?

Upvotes: 0

Views: 46

Answers (2)

Rufus
Rufus

Reputation: 171

No plugin needed. Try this:

$(function() {

    $('#something').on("click", function() {
    var foo = $(this).attr('href'); 
alert(foo);
})
});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

You have you script in the head section, when it is executed the target elements .modal-link are not yet present in the dom so the plugin won't be initialized for those elements. So move your script to a dom ready handler.

Also need to include jQuery library() - Assuming you already have this as you said there are no errors.

<!-- include jQuery library-->
<script src="js/jquery.js"></script>
<script src="js/modal-load.js"></script>
<script>
    //dom ready handler
    jQuery(function($){
        $('.modal-link').modalLoad();
    })
</script>

Upvotes: 1

Related Questions