1

Доброго времени суток! Суть задачи: выбираем абзац из одного блока и вставляем в другой. далее необходимо определить координаты клика во вставленном абзаце. Разметка HTML:

   <div id="someDiv">
       <p>Some Text</p>
    </div>
    <div id="result">
        Result Here!
    </div>

Скрипт на jQuery:

  $(function(){
      $('#someDiv p').clone().appendTo('#result');
      $('#someDiv p').hide();
      $('#result').add('p').bind('click', function(event){
        alert('x=' + event.pageX + ', y=' + event.pageY);
      });
    });

Вот такая банальщина. работает, но не так, как хотелось бы!координаты выводятся и при клике в абзаце, и при клике в родительском элементе т.е. в #result. Cобытие клика "всплывает" по DOM-дереву (что и должно быть). но это распространение хотелось бы остановить. метод .stopPropagation() не решает проблемы. Моя уверенность в том, что я сделал что-то не так не покидает меня. Подскажите в чём может быть ошибка и как отменить всплытие?

2 ответа 2

1

Я так понял - у вас в определенный div добавляется какой то элемент и алерт нужно что бы срабатывал по клику на него?

В таком случае

$('#result').children('p').live('click', function(){});
4
  • а вот это решение! только вот Ваша конструкция не работает. точнее работает, но необходимы изменения. для применения метода live() необходимо указывать ожидаемый набор, который будет в DOM. я изменил так $('#result p.moved').live('click', function(){}); и код начал работать, как нужно мне.
    – LeD4eG
    26 сен 2011 в 19:06
  • Да, что то я не подумал что не через .children() надо добираться. Кстати $('#result p').live('click', function(){}); тоже будет работать. 26 сен 2011 в 19:26
  • так только он и работает) Спасибо Вам! это я что-то не подумал, что надо привязывать событие на элементы, созданные "на лету"
    – LeD4eG
    26 сен 2011 в 19:29
  • Да не за что) Спрашивайте если что. 26 сен 2011 в 19:53
0

В вашем примере onClick вешается и на блок #result и на абзац

Добавьте вставленному абзацу идентификатор и по нему привяжите событие.

8
  • насколько я помню метод .add() добавляет элемент к набору. то есть возвращает новый набор с указанным элементом.
    – LeD4eG
    26 сен 2011 в 17:46
  • Полностью не уверен но дожен возвращатся исходный набор а не модифицированный вот этот код должен работать так как вам надо - только для вставленного абзаца $(function(){ $('#someDiv p').clone().addClass('someClass').appendTo('#result').bind('click', function(event){ alert('x=' + event.pageX + ', y=' + event.pageY); }); $('#someDiv p').hide(); });
    – Farrock
    26 сен 2011 в 17:52
  • возвращается именно модифицированный набор. Ваш совет хорош, но он, извините, прост. дело в том, что меня интересует именно отмена распространения. я проверял источник события. для уточнения проверки делал 2 клика - первый в абзаце (источник абзац) и в разделе, содержащий абзац (источник раздел). вот мне и стало интересно почему это происходит и как это остановить.
    – LeD4eG
    26 сен 2011 в 18:00
  • это не распространение события - оно просто было привязано к лишним элементам Это легко проверить - Создайте несколько абзацев за пределами #result - и на них тоже повесится событие
    – Farrock
    26 сен 2011 в 18:03
  • несколько абзацы создал: один в блоке result и за его пределами. добавил класс в перемещаемый абзац. в итоге событие распространяется на сам блок #result, на абзац постоянно в нём существующий, и на перемещаемый в этот блок абзац. на абзац, находящийся за пределами блока #result - нет.
    – LeD4eG
    26 сен 2011 в 18:32

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.