jQuery — append（），然后是.click（）+ $（this）.parent（）

Question

Is there a way to add a click function to an appended html element? Additionally, is it possible to do something to the parent of that appended element? For example, add or remove a class of its immediate parent?

Here's some pseudo code:

// Jade

.container.test

  .content
    | Some content

// JS

$('.content').append('<button>Button</button>')

$('button').on('click', function() {
  $(this).parent('.container').removeClass('test')
})

Answer 1

Yes.

var $button = $('<button>').text('Button');
$('.content').append($button);

$button.on('click', function() {
  $button.parent('.container').removeClass('test')
})

This is why it's best practice to create HTML elements using jQuery (or another library of your choice) and then append/prepend/replace the element, instead of appending/prepending/replacing raw HTML strings.

Answer 2

You could also do something like below:

$('.content').append($('<button>Button</button>').click(function() {
   $(this).parent('.container').removeClass('test');
}));

Another solution is to use event delegation (bind event on document ).

$('.content').append('<button>Button</button>');

$(document).on('click', '.content button', function() {
  $(this).parent('.container').removeClass('test');
});