javascript - Bootstrap 手风琴抑制打开

Question

我有这个 jQuery，它显然不起作用：

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

我的 html 是由这个 for 循环/附加生成的：

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

jQuery

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

请参阅文档上的 jQuery

Answer 2

当 DOM 发生变化时，您想使用 .on 而不是 .click。

看到这个答案。.on 将（并且应该）用于监视更改区域的父级的更改；一旦执行了更改，它将自动将所有事件重新绑定到选定的子元素（使用过滤器）。在那个答案中，我更详细地描述了如何使用它。

简而言之，虽然这是低效的（您应该将 body 更改为仅包含 DOM 更改部分的某个 div）：

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

如果您只想要以下手风琴项目：

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