以编程方式添加 html 后，Jquery .click 不起作用

Question

我正在用 asp.net 开发一个网络应用程序。我正在使用 jquery 以编程方式在#messages-list 中添加/附加消息，它显示得很好，但是我想在单击消息时显示一个从右侧流出的 div。我添加了 .click 事件，但它不起作用。奇怪的是，当我粘贴静态/手动 html 代码并注释以编程方式附加 html 的 jquery 部分时，单击工作正常，我不知道问题出在哪里。此外，chrome控制台没有错误。请帮忙。我的代码如下。

我的 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);
  });

Answer 1

由于 .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);
        });

Answer 2

使用on 方法：

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

Answer 3

使用 Jquery Live 点击

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

Answer 4

也试试这个..

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

    });

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

    });
});