Question

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

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

我的html是由for 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

当你的DOM正在改变时，你想使用.on而不是.click。

见this answer。 .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')
});

Answer 2

<强> Jquery的

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

请参阅jQuery on docs

Bootstrap手风琴抑制开放

2 个答案: