Клуб API Карт

Как навесить обработчик клика по ссылке в balloonContentBody

Пост в архиве.
  1. var placemark = new ymaps.Placemark(coords, {
  2.     balloonContentHeader: human['fio'] + ', ' + ' (pk=' + human['pk'] + ')',
  3.     balloonContentBody: '<a id="details-human-pk-' + human['pk'] + '" href="' + balloonHref +'">детальная информация</a>'
  4. });
  5.  
  6. // Добавляем метку в коллекцию.
  7. humanCollection.add(placemark);
  8.                    
  9. // Вот здесь собственно и трабла :( селектор генерится нормальный, вида "a#details-human-pk-6", но не навешивается обработчик
  10. $('a#details-human-pk-' + human['pk']).on('click', '.ymaps-2-1-17-balloon-pane ymaps', function(e) {
  11.     e.preventDefault();
  12.     var win = window.open(this.href, this.id, 'height=500,width=800,resizable=yes,scrollbars=yes');
  13.     win.focus();
  14. });
11 комментариев

Я не проверял, но должно быть примерно так:

var MyBalloonContentBodyLayout = ymaps.templateLayoutFactory.createClass(

'детальная информация', {

   build: function () {

       MyBalloonContentBodyLayout.superclass.build.call(this);

       this._$element = $('a', this.getParentElement());

       this._setupListeners();

   },

   clear: function () {

       this._clearListeners();

       MyBalloonContentBodyLayout.superclass.clear.call(this);

   },

   _setupListeners: function () {

       this._$element.on('click', this._onClick);

   }

   _clearListeners: function () {

   this._$element.off('click');

   },

   _onClick: function (e) {

   e.preventDefault();

   var win = window.open(this.href, this.id, 'height=500,width=800,resizable=yes,scrollbars=yes');

   win.focus();

   }

});

var MyBalloonContentHeaderLayout = ymaps.templateLayoutFactory.createClass('{{ properties.humanFio }}, (pk={{ properties.humanId }})');

var placemark = new ymaps.Placemark(coords, {

    humanId: human['pk'],

    humanFio: human['fio'],

    href: balloonHref

}, {

balloonContentBodyLayout: MyBalloonContentBodyLayout,

balloonContentHeaderLayout: MyBalloonContentHeaderLayout

});

 

// Добавляем метку в коллекцию.

humanCollection.add(placemark);

ужастики :) а почему обчное делегирование не срабатывает? элемент с классом .ymaps-2-1-17-balloon-pane вроде как есть при загрузке страницы, или я ошибаюсь и нужно подвязывать в качестве родительского весь контейнер карты ...

очевидно что завязываться на ymaps-2-1-17 не стоит, имя класса может измениться в любой версии.
Да и собственно непонятно что именно ужасно?
В вашем варианте событие навешивается всегда (даже если балун не открывали)

решил проблему, вот так сработало:

$('.ymaps-2-1-17-inner-panes').delegate('.ymaps-2-1-17-balloon-pane a#details-human-pk-' + human['pk'], 'click', someFunc)

а на счет версий хорошее замечание, но по идее также решаемо, просто указать 2.1.17 при подключении

delegate в jQuery объявлено как "deprecated" (устаревшим) так что у jQuery вы там тоже версию укажите =)

Оставлю послание для тех кто будет этот тред читать:
"так делать не надо"
delegate в своей реализации вызывает on, так что это легко можно переписать на вызов on,

Спасибо за пост, добавим ваше решение во вредные советы

и Вам спасибо), да, я в курсе, что это джекверийный быдлокод :D и когда-нибудь я начну учить js, но пока ... добавлю todo-ку рефакторинг и ссылку на Ваш ответ =)

Вы то же поймите, вы просите помощи и я трачу время и пишу вам как сделать "правильно", если бы мне было наплевать, я бы написал:

 

Поменяйте в этой строчке селекторы местами, было:$('a#details-human-pk-' + human['pk']).on('click', '.ymaps-2-1-17-balloon-pane ymaps', function(e) {стало:$('.ymaps-2-1-17-balloon-pane').on('click', 'a#details-human-pk-' + human['pk'], function(e) {
и все заработает

Так зачем тогда спрашивать??

 

в процессе формулировки вопроса возникают "гениТальные" идеи и шалит альтруизм по отношению к братьям-быдлокодерам =) ... статья на хабре четкая, повысилось настроение, спасибо)
Хинт:
опции balloonContentBodyLayout, balloonContentHeaderLayout
можно назначить коллекции humanCollection, а не каждой метке