jQuery Event Binding

Question

I'm struggling to get my head around the way I author (and attach to events) in a custom jQuery plugin.

I have the start of a plugin, in this simple example....

(function($) {
    $.fn.myPlugIn = function(options) {
        var defaults = {
            'width': 200,
            'url': 'www.someurl.com'
        };
        // If options exist, lets merge them with our default settings
        var options = $.extend({}, defaults, options);

        function somePrivateFunction() {
            return options.url;
        }

        return this.each(function() {
            $(this).text(somePrivateFunction());
            $(this).width(options.width);
        });
    };
})(jQuery);

$(document).ready(function() {

    $('#testDiv1').myPlugIn({
        'width': 150
    });
    $('#testDiv2').myPlugIn({
        'url': 'www.google.com'
    });
});

<div id="eventDriver1">Click here to update 1</div>
<div id="eventDriver2">Click here to update 2</div>
<div id="testDiv1" class="testClass"></div>
<div id="testDiv2" class="testClass"></div>

As you can see I set testDiv1, and testDiv2, and they behave as I'd expect.

Now I want to be able to say that eventDriver1 should refresh testDiv1, and for it to specify what text shoudl go into it. I just don't know where to start!!

I appreciate that will have been documented somewhere, and/or asked already, but I'm just not sure what buzzwords I need to search for!!! Any help appreciated.

Thanks.

Binding events in jQuery is accomplished with .bind() or .live() or by using one of the shortcuts (such as .click(), .submit(), .load(), etc). I'm not really sure what your question is... — Chad
– Chad, Commented May 17, 2011 at 19:01

jrn.ak · Accepted Answer · 2011-05-17 19:03:49Z

1

How about this:

Live Demo

$('#eventDriver1').click(function() {
    $('#testDiv1').myPlugIn({'url': 'www.yahoo.com'});
});
$('#eventDriver2').click(function() {
    $('#testDiv2').myPlugIn({'url': 'www.microsoft.com', 'width': 250});
});

answered May 17, 2011 at 19:03

jrn.ak

36.8k7 gold badges37 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ETFairfax Over a year ago

Thanks for the example, and although it works just fine, and I'm happy to use that method if its the way to do it, but I'm trying to work out how to expose some sort of Update() method on the plugin, and how to call it. Maybe I have the wrong idea of how things tie together?

Naftali · Accepted Answer · 2011-05-17 19:00:08Z

1

Use click.

$('#eventDriver1').click(function(){/*do something*/})

answered May 17, 2011 at 19:00

Naftali

147k41 gold badges247 silver badges304 bronze badges

1 Comment

ETFairfax Over a year ago

Thanks for the reply, but it's the /* Do Something */ bit that I am confused about. I'm trying to work out how to expose some sort of Update() method on the plugin, and how to call it? Does that make sense?

Collectives™ on Stack Overflow

jQuery Event Binding

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related