0

I have created a plugin which will create dynamic element and attach to some container . I want to bind events for that element inside my plugin so that it can use plugin information etc.

(function ($, window, document, undefined) {
    $.scrollTo = function(el, options){
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;

        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;

        base.init = function(){
            base.options = $.extend({},$.scrollTo.defaultOptions, options);

            // Put your initialization code here
        };

        // On click
        base.$el.click(function (event) {
          event.preventDefault(); 
          var span = $('<span class="myElement"></span>'); 
          span.appendTo('#main');
        });    

        // Run initializer
        base.init();
    };

    $.scrollTo.defaultOptions = {};

    $.fn.scrollTo = function(options){
        return this.each(function(){
            (new $.scrollTo(this, options));
        });
    };

})(jQuery, window, document);


//Initialize plugin
$('.content #test').scrollTo();

I am creating a new element on click event and want to attach a click function to it and inside that function I want to utilize plugin options. How could I achieve that need help ?

Ghazanfar Khan
  • 3,648
  • 8
  • 44
  • 89
  • It looks like you're already doing what you need with `base$el.click()`... Do you have a specific problem? – Rory McCrossan Oct 05 '17 at 10:39
  • Basically I want to attach click event for span element that is created and use plugin option inside it. – Ghazanfar Khan Oct 05 '17 at 10:40
  • Well you are already using the logic to do that with the `base.$el` element, so I'm not seeing the issue you're facing? – Rory McCrossan Oct 05 '17 at 10:41
  • I have updated question , basically I am creating a popup type div inside click event and appending to some container, I have buttons inside it which need to access plugin options.Is it possible? – Ghazanfar Khan Oct 05 '17 at 10:45

1 Answers1

0

If you want to attach an event to a dynamic generated element, then the most important thing I think you should know, is that you can't do it with the usual $("") jQuery Selector, you must use the $(document), for example:

Instead of using this:

$('input[type="checkbox"]')

We'll use this:

$(document).on("change","input[type='checkbox']",function(){});

to Handle clicks coming from any checkbox

Inspired by: Event binding on dynamically created elements?

Mehdi Bouzidi
  • 1,937
  • 3
  • 15
  • 31
  • Then how do i use plugin option inside it ? – Ghazanfar Khan Oct 05 '17 at 10:46
  • @GhazanfarKhan Honestly i don't have any idea about creating `jQuery Plugin`, but I've learned about dynamic elements, event handler yesterday, & I want to share the information with you, in case that it helps. Good Luck – Mehdi Bouzidi Oct 05 '17 at 11:57