Call a jQuery function when a button is being clicked

Question

I'm trying to set jQuery a function on its own, and call the function when a click event triggers. Here's the code I've managed to come up with:

HTML:

<input type="text" class="form-control email_input" name='email' id="reserve_email_1" placeholder="Email">
                <span class='input-group-btn'>

                  <button type="submit" id="subscribe_1" class="btn btn-success subscribe_button">Send now</button>

</span>

JS:

$(document).ready(function(){
$('.subscribe_button').click(function(){
$.fn.Subscribe();
 });

 $.fn.Subscribe = function(){ 
  var email = $(this).parent().siblings('.email_input').val();
  alert(email);
} 

});

But no matter what values I have in the email input, it would not pop up in the alert. I tested and don't think it's the wrong traversing order, but rather the first function failed to call the 2nd function. Any advice on why it would happen?

Best,

Answer 1

Subscribe is a plugin method, so you need to invoke it like a jQuery plugin like(so that the method will get proper context value for this )

$('.subscribe_button').click(function () {
    $(this).Subscribe();
});

Demo: Fiddle