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

我在asp.net中开发一个web应用程序。我正在使用jquery以编程方式在＃messages-list中添加/附加消息，它显示正常，但我想要显示单击msg时从右侧流动的div。我添加了.click事件，但它不起作用。奇怪的是，当我粘贴静态/手动的HTML代码和评论jQuery的部分，附加HTML编程，点击工作正常，我不知道问题在哪里。而且在Chrome控制台中没有错误。请帮助。我的代码如下。Jquery .click以编程方式添加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); 
    });

来源

2013-12-11 saadsaf

可能重复[通过动态生成的元素引发的事件没有被事件处理程序捕获（http://stackoverflow.com/questions/12829963/events-triggered-by - 动态生成元素不被事件捕获） –

和[事件绑定在动态创建的元素上？]（http://stackoverflow.com/q/203198/218196） –

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

来源

2013-12-11 07:25:23

谢谢......它工作得很好 – saadsaf

@Sridhar R非常感谢你！我是jQuery和Javascript的新手。您能否建议我提供有关事件处理程序如何在编程修改的dom上工作的信息链接？即为什么.on（）正常工作，为什么.click（）不会？ – GradDev

使用on方法：

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

来源

2013-12-11 07:24:58 Pascalz

为什么要将OP使用该方法？请解释问题以及您的答案如何解决问题。 –

-1

尝试使用jQuery的直播点击

$（ '文件'）。住（ '点击'，功能{...}） ;

来源

2013-12-11 07:26:35 Ammar

自jQuery 1.9以来，jQuery'.live'已被弃用，并且不再存在。 –

已弃用，所以不要使用 – robieee

live（）已弃用。 –

-1

试试这个太..

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

    }); 

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

    }); 
});

的

来源

2013-12-11 07:28:37

为什么OP应该这样做？请解释问题以及您的答案如何解决问题。 –

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

回答

相关问题