Jquery Referencing this

Given the object:

// A data set
$.DataArea = function () {

    // Default options
    $.extend(this, {
        class: 'DataSet',
        data: new Array(),
        container: null
    });

    // Add a bar to this object
    this.addBar = function(startDate, endDate, label) {    
        var insertPos = this.data.length;
        this.data[insertPos] = new $.DataBar();
        this.data[insertPos].startDate = startDate;
        this.data[insertPos].endDate = endDate;
        this.data[insertPos].label = label;

        this.container.children('.jobArea').append('<div class="bar-wrapper"><div class="bar">' + label + '</div></div>');   



    }

    // Bind the bar to a div
    this.bind = function(docID) {
        this.container = $('#' + docID);   
        this.container.append('<div class="jobArea"></div>')     
    };

    this.init = function() {

        this.container.children('.jobArea .bar, .jobArea .marker').each(function(i) {
            $(i).bind("selectstart", _preventDefault);
        });

    };

};

The line $(this).bind("selectstart", _preventDefault); I think is not working, because $(this) is conflicting with the this of the object?

How can I correctly reference the selected element in the each loop in a non conflicting way? (If that's the problem)

Edit

DataArea in use:

开发者_运维问答

var MyData = new $.DataArea();
MyData.bind("container");
MyData.addBar("", "", "Bar 1");
MyData.addBar("", "", "Bar 2");
MyData.init();

---

Go back to using this instead of i, and use the find()^[docs] method instead of the children()^[docs] method.

this.init = function() {

      //------------v
    this.container.find('.jobArea .bar, .jobArea .marker').each(function(i) {
        $(this).bind("selectstart", _preventDefault);
    });

};

This is necessary becuase .bar and .marker are not direct descendants of container.

---

The second variable passed to the .each() callback is the actual element. You should be able to re-write it like so:

this.container.children('.jobArea .bar, .jobArea .marker').each(function(i,e) {
    $(e).bind("selectstart", _preventDefault);
});

Edit
I think it's also worth mentioning that the selectstart event is not supported in all browsers which may actually be the problem.