Jquery .click not working after adding html programatically

Question

I m developing a web app in asp.net. I am adding/appending msgs in #messages-list programatically using jquery, It displays fine, but i want to show a div flowing from right when a msg is clicked. I added the .click event but its not working. Strange thing is that when i paste static/manually html code and comment the jquery part that is appending the html programatically, the click works fine, I don't know where is the problem. Moreover there is no error in chrome console. Kindly help. My code is below.

My html code

<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>

My javascript/jquery part

  $("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);
  });

possible duplicate of [Events triggered by dynamically generated element are not captured by event handler](http://stackoverflow.com/questions/12829963/events-triggered-by-dynamically-generated-element-are-not-captured-by-event-hand) — Felix Kling, Dec 11 '13 at 07:26
and [Event binding on dynamically created elements?](http://stackoverflow.com/q/203198/218196) — Felix Kling, Dec 11 '13 at 07:27

score 4 · Accepted Answer · answered Dec 11 '13 at 07:25

Since the .arrow-list.message element are created dynamically you need to use event delegation to register event handlers to these elements.

When you use $('.arrow-list.message').click(....); to register an event handler it will register the handle to only those elements which are already present in the dom at the time of the code execution, in you case since these elements are created after that the handlers will not get attached to the newly created elements

Try with this

    $(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);
        });

@Sridhar R Thank you very much for this! I'm new to jQuery and Javascript. Could you please suggest me an informative link on how event handlers work on programmatically modified dom? i.e. exactly why .on() works and why .click() doesn't? — GradDev, Feb 17 '17 at 07:06

score 0 · Answer 2 · answered Dec 11 '13 at 07:24

0

use on method :

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

answered Dec 11 '13 at 07:24

Pascalz

2,219
1
23
24

Why should the OP use that method? Please explain the problem and how your answer solves it. – Felix Kling Dec 11 '13 at 07:28

score -1 · Answer 3 · answered Dec 11 '13 at 07:26

-1

use Jquery Live click

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

answered Dec 11 '13 at 07:26

Ammar

13
5

2

jQuery `.live` is deprecated since ages and doesn't exist anymore since jQuery 1.9. – Felix Kling Dec 11 '13 at 07:27
its deprecated, so do not use it – robieee Dec 11 '13 at 07:28
live() is deprecated. – Sridhar R Dec 11 '13 at 07:28
use $(document).bind('click', function {...}); instead – robieee Dec 11 '13 at 07:28

score -1 · Answer 4 · answered Dec 11 '13 at 07:28

-1

try this too..

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

    });

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

    });
});

answered Dec 11 '13 at 07:28

Harshil Raval

2,057
1
10
10

Why should the OP try this? Please explain the problem and how your answer solves it. – Felix Kling Dec 11 '13 at 07:28

Jquery .click not working after adding html programatically

4 Answers4