Путаница по поводу событий Jquery? - PullRequest
Новая
       1

Путаница по поводу событий Jquery?

1 голос
/ 03 апреля 2011

Я только начал использовать JQuery и столкнулся с проблемой, связанной с событиями.

Ниже приведен мой код, он создает элемент div на странице, я хотел бы прикрепить обработчик событий к этому divкоторый реагирует, если щелкнуть или дважды щелкнуть.Я думал, что следующий код будет работать, но он, похоже, не работает вообще: 

this.mainAppDiv = document.createElement("div");
this.mainAppDiv.id = "mainBody";
this.mainAppDiv.style.width = "99%";
this.mainAppDiv.style.height = this.mainCanvasDiv_H;
this.mainAppDiv.style.border = "thin red dashed";

document.body.appendChild(this.mainAppDiv);

$(this.mainAppDiv).click(function()
{
    alert("The Clicked Divs ID: " + this.mainAppDiv.id);
});

Когда событие вызывается, просто нужно предупредить, какой элемент DIV был нажат, но я получаю следующую ошибку в firebug:

this.mainAppDiv не определено
строка 43 - alert ("Идентификатор кликаемого элемента:" + this.mainAppDiv.id);

Кто-нибудь может понять, почему это не сработает?

Ответы [ 4 ]

2 голосов
/ 03 апреля 2011

Вы виновны в this злоупотреблении.

- это == окно

$(this.mainAppDiv).click(function() {

- этот == dom объект нажал

alert("The Clicked Divs ID: " + this.mainAppDiv.id);

Простой ответ - изменить на: 

$(this.mainAppDiv).click(function(e)
{
    alert("The Clicked Divs ID: " + e.target.id);
});

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

$('#mainAppDiv').click(..)

1 голос
/ 03 апреля 2011

Потому что this внутри этого обработчика событий не будет ссылаться на тот же объект, что и когда он был определен и передан в jQuery. Это будет ссылка на созданную вами цель <div> (при условии, что настройка для обработчика событий действительно работает).

Вы можете значительно упростить этот код: 

var self = this;
${'body').append($('<div></div>', {
  id: 'mainBody',
  css: {width: '99%', height: self.mainCanvasDiv_H, borderColor: 'red', borderWidth: 'thin', borderStyle: 'dashed' },
  click: function() {
    alert("Clicked ID: " + this.id);
  }
}));
1 голос
/ 03 апреля 2011

this - это не тот же элемент в обработчике.Внутри обработчика this относится к элементу, к которому был применен обработчик. 

$('div').attr('id','mainBody')
        .css( { width: '99%',
                height: $('#mainCanvasDiv').height(),
                border-style: 'dashed',
                border-width: 'thin',
                border-color: 'red'
         })
        .click( function() {
             alert('The clicked Divs ID: ' + this.id );
         })
        .appendTo('body');
0 голосов
/ 03 апреля 2011

Поскольку они создаются во время выполнения, вы должны использовать live вместо click

http://api.jquery.com/live/

jquery live должен помочь

Как уже упоминалось, у вас есть две проблемы вваш код, вам все еще нужно использовать jquery live ... так как вы создаете div динамически

...