Bootstrap手风琴抑制器打开

Question

I've got this jQuery, which is obviously not working:

$('input.descriptionLC').click(function(){
    $('.collapse').collapse('hide')
});

My html is being generated by this for loop / append:

for (i=0; i < nodeArr.length; i++){
  $('#accordion2').append('<div class="accordion-group">' +
  '<div class="accordion-heading">' +
    '<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse' + i + '">' +  
        '<hr class="inLC">' +
        '<div class="divLC">' +
            '<p class="titleLC">' + nodeArr[i][0] + '</p>' +
            '<p class="imgWrap"><img class="imgLC" src="img/On_slider.png"></p>' +
            '<input type="text" class="descriptionLC" id="description' + i + '">' +
        '</div>' +    
    '</a>' +
  '</div>' +
  '<div id="collapse' + i + '" class="accordion-body collapse">' +
    '<div class="accordion-inner">' +
      'Anim pariatur cliche...' +
    '</div>' +
  '</div>' +
  '</div>'
  );
}

Answer 1

You want to use .on instead of .click as your DOM is changing.

See this answer . .on will (and should) be used to watch the parent of the changing area for changes; once the changes have been executed it will automatically rebind all of the events to the selected subelements (with the filter). In that answer I give a more detailed description of how to use it.

In short, though this is inefficient (you should change body to some div containing just the changing part of the DOM):

$('body').on("click", 'input.descriptionLC', function(e){
      $('.collapse').collapse('hide')
});

if you want just the following accordion item :

$('body').on("click", 'input.descriptionLC', function(e){
      $(this).next('.collapse').collapse('hide')
});

Answer 2

Jquery

$('body').on('click', 'input.descriptionLC', function(e){
    $('.collapse').collapse('hide');
});

See jQuery on docs