Question

我正在asp.net中开发一个Web应用程序。我正在使用jquery以编程方式在＃messages-list中添加/附加msgs，它显示正常，但我想在点击一个msg时显示从右边流出的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 () {

    });
});

以编程方式添加html后，Jquery .click无法正常工作

4 个答案: