Классы Javascript и слушатели событий jQuery

Question

Я пишу класс, который должен присоединять слушателей событий к объектам в соответствующих разделах (в этом примере #one и #two), но у меня возникают проблемы с передачей переменных из класса для настройки слушателей событий jQuery .

<script type="text/javascript">

    function myClass(id) {

        this.id = id;

        $(document).ready(function(){

            $(this.id + ' .filter').click(function(){ alert("You clicked a filter"); });

        });

    }

    one     = new myClass('#one');
    two     = new myClass('#two');

</script>

<div id="one">
    <a href="javascript://" class="filter">I am link one</a>
</div>

<div id="two">
    <a href="javascript://" class="filter">I am link two</a>
</div>

... к сожалению, переменная область не согласна со мной; this.id недоступен изнутри $(document).ready(), поэтому слушатели событий не запускаются. Как я могу получить к нему доступ?

Answer 1

Это потому, что «this» - это ключевое слово, которое ссылается на объект, для которого была вызвана текущая функция. В обработчиках событий jQuery этот объект является элементом DOM, в котором был зарегистрирован обработчик событий (например, в данном случае документ). Используйте другое имя переменной для хранения вашего объекта:

<script type="text/javascript">
    function myClass(id) {
            var me = this;
            this.id = id;

            $(document).ready(function(){
                    $(me.id + ' .filter').click(function(){ alert("You clicked a filter"); });
            });
    }
    one             = new myClass('#one');
    two             = new myClass('#two');
</script>

Answer 2

В этом случае вам вообще не нужно объявлять ее в другой переменной, просто поменяйте id на this.id в вашей функции document.ready:

function myClass(id) {
    $(document).ready(function(){
        $(id + ' .filter').click(function(){ alert("You clicked a filter"); });
    });
}

Однако, если вы выполнили некоторую обработку, вы всегда можете указать псевдоним this в другой переменной:

function myClass(id) {
    var base = this;
    base.id = id;
    // Other items set on base.value

    $(document).ready(function(){

        $(base.id + ' .filter').click(function(){ alert("You clicked a filter"); });

    });

}

Answer 3

Вам нужно сделать local копию this, чтобы использовать ее во внутренних функциях:

function myClass(id) { 
    this.id = id;
    var that = this;
    $(document).ready(function(){

        $(that.id + ' .filter').click(function(){ alert("You clicked a filter"); });

    });
}