Jquery .click не работает после программного добавления HTML

0

Я разрабатываю веб-приложение в asp.net. Я добавляю/добавляю msgs в # message-list программно с помощью jquery. Он отображает все, но я хочу показать div, текущий справа, когда нажимается msg. Я добавил событие.click, но оно не работает. Странно то, что когда я вставляю статический/ручной html-код и комментирую часть jquery, добавляющую html программно, щелчок отлично работает, я не знаю, где проблема. Кроме того, в хром-консоли нет ошибки. Незлая помощь. Мой код ниже.

Мой html-код

<ul id="messages-list">
</ul>
<div id="MessagePane" style="height: 666px; display: none;">
   <div class="inner-pane">
      <div style="overflow: hidden;">
         <a href="#" class="floatleft next-step message-close" data-pane="MessagePane">Close</a>
         <a class="floatright" id="message-detail-date">July 9, 2013</a>
      </div>
      <div class="clear"></div>
      <h4 id="message-detail-title">Important Message: Pinapple Shortage</h4>
      <p id="message-detail-content">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum ornare dui sed commodo. Class aptent taciti sociosqu ad litora torquent. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum ornare dui sed commodo. Class aptent taciti sociosqu ad litora torquent. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum ornare dui sed commodo. Class aptent taciti sociosqu ad litora torquent. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum ornare dui sed commodo. Class aptent taciti sociosqu ad litora torquent.<br>
      </p>
      <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum ornare dui sed commodo. Class aptent taciti sociosqu ad litora torquent.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum ornare dui sed commodo. Class aptent taciti sociosqu ad litora torquent.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum ornare dui sed commodo. Class aptent taciti sociosqu ad litora torquent.
      </p>
   </div>
</div>

Моя часть javascript/jquery

  $("ul#messages-list").append('<li><a href="#" class="arrow-list message" data-pane="MessagePane"><div><div msgggggg</div></a></li>');

  $('.arrow-list.message').click(function () {
      alert('dsad');
      $(this).parent().siblings().find('a').removeClass('transparent');
      $(this).addClass('transparent');
      var height = $('#body_inner').outerHeight();

      if ($('#' + $(this).data('pane')).is(":visible")) {

          $('#' + $(this).data('pane')).hide('slide', {
              direction: 'right'
          }, 300).css('height', height).show('slide', {
              direction: 'right'
          }, 500);
      } else {
          $('#' + $(this).data('pane')).css('height', height).show('slide', {
              direction: 'right'
          }, 500);
      }
  });

  $('.message-close').click(function () {
      $('.message').removeClass('transparent')
      $('#' + $(this).data('pane')).hide('slide', {
          direction: 'right'
      }, 500);
  });
Теги:

4 ответа

4
Лучший ответ

Так как. Элемент arrow-list.message создается динамически, вам нужно использовать делегирование событий для регистрации обработчиков событий для этих элементов.

Когда вы используете $('.arrow-list.message').click(....); чтобы зарегистрировать обработчик событий, он зарегистрирует дескриптор только тех элементов, которые уже присутствуют в dom во время выполнения кода, в вашем случае, поскольку эти элементы создаются после этого, обработчики не будут привязаны к вновь созданным элементам

Попробуйте с этим

    $(document).on('click','.arrow-list.message',function () {
            alert('dsad');
            $(this).parent().siblings().find('a').removeClass('transparent');
            $(this).addClass('transparent');
            var height = $('#body_inner').outerHeight();

            if ($('#' + $(this).data('pane')).is(":visible")) {

                $('#' + $(this).data('pane')).hide('slide', {
                    direction: 'right'
                }, 300).css('height', height).show('slide', {
                    direction: 'right'
                }, 500);
            } else {
                $('#' + $(this).data('pane')).css('height', height).show('slide', {
                    direction: 'right'
                }, 500);
            }
        });

        $(document).on('click','.message-close',function () {
            $('.message').removeClass('transparent')
            $('#' + $(this).data('pane')).hide('slide', {
                direction: 'right'
            }, 500);
        });
Поделиться
  • 0
    Спасибо ... все работало нормально
  • 0
    @Sridhar R Большое спасибо за это! Я новичок в jQuery и Javascript. Не могли бы вы предложить мне информативную ссылку о том, как работают обработчики событий на программно модифицированном dom? то есть, почему .on () работает и почему .click () не работает?
0

использование on методу:

$(document).on('click','.arrow-list.message', function() {...
Поделиться
  • 0
    Почему ОП должен использовать этот метод? Пожалуйста, объясните проблему и как ваш ответ решает ее.
-1

попробуйте это тоже..

$(function(){
    $('.arrow-list.message').click(function () {

    });

    $('.message-close').click(function () {

    });
});
Поделиться
  • 0
    Почему ОП должен попробовать это? Пожалуйста, объясните проблему и как ваш ответ решает ее.
-2

использовать Jquery Live click

$ ('document'). live ('click', function {...});

Поделиться
  • 2
    jQuery .live устарел с .live времен и больше не существует с jQuery 1.9.
  • 0
    его не рекомендуется, так что не используйте его
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню