动态创建的元素不会触发触发器

我有一块看起来像这样的动态代码。动态创建的元素不会触发触发器

 var li3 = document.createElement('li'); 
     li3.classList.add("col-sm-3"); 
     li3.classList.add("no_padding"); 
     var inner = ""; 
     inner = inner + "<div class='dropdown'>"; 
     inner = inner + "<button class='btn btn-default dropdown-toggle col-sm-12' style='border-radius: 0 4px 4px 0;' type='button' id='dropdownMenu1' data-toggle='dropdown' aria-haspopup='true' aria-expanded='true' data-questnrid='"+questnrid+"' data-questionid='"+questionid+"' data-dlnkid='"+dlnkid+"' data-lnkid='"+lnkid+"' data-qstaskedid='"+qstaskedid+"' data-qstaskedgrpid='"+qstaskedgrpid+"'>"; 
     inner = inner + "<span class='dropdown_text'>Choose a option</span>"; 
     inner = inner + "<span class='caret'></span>"; 
     inner = inner + "</button>"; 
     inner = inner + "<ul class='dropdown-menu' aria-labelledby='dropdownMenu1'>"; 
     inner = inner + "<li><a href='#' class='list-item'>Yes</a></li>"; 
     inner = inner + "<li><a href='#' class='list-item'>No</a></li>"; 
     inner = inner + "<li><a href='#' class='list-item'></a></li>"; 
     inner = inner + "</ul>"; 
     inner = inner + "</div>"; 
     li3.innerHTML = inner; 
     document.getElementById(thisID).appendChild(li3);

在网络中看起来更像是这样。

<li class='col-sm-2 no_padding'> 
    <div class='dropdown'> 
     <button class='btn btn-default dropdown-toggle col-sm-12' style='border-radius: 0px 4px 4px 0px; type='button' id='dropdownMenu1' data-toggle='dropdown' aria-haspopup='true' aria-expanded='true'> 
      <span class='dropdown_text'>Choose a option</span> 
      <span class='caret'></span> 
     </button 
     <ul class='dropdown-menu' aria-labelledby='dropdownMenu1'> 
      <li><a href='#' class='list-item'>Yes</a></li> 
      <li><a href='#' class='list-item'>No</a></li> 
      <li><a href='#' class='list-item'></a></li> 
     </ul> 
    </div> 
</li>

第一个块被n按钮按下并且它完全生成列表。
但现在我点击下拉菜单接受该下拉列表的值，并且没有事件触发。这是我用过的。

$('.dropdown-menu li > a').on("click", function(event){ 
     console.log("fire"); 
     $(this).closest('.dropdown').find('button span.dropdown_text').text(this.innerHTML); 
    });

此事件触发不是动态创建的第一个代码块。但之后添加任何oter块不触发事件触发器。

任何想法？

哦，这里是我的图书馆，我使用，如果可能会导致一些

<script type="text/javascript" src="media/js/jquery-3.1.1.min.js"></script> 
<link rel="stylesheet" href="media/css/bootstrap.css"> 
<script type="text/javascript" src="media/js/bootstrap.js"></script>

来源

2017-01-24 morne

尝试[事件委托]（https://learn.jquery.com/events/event-delegation/）或将元素添加到DOM后绑定事件。 – itzmukeshy7

http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements?rq=1 –

的重复[事件绑定动态创建的元素？]（http：// stackoverflow。 COM /问题/ 203198 /事件结合-上动态创建的元素） –

$("body").on("click", '.dropdown-menu li > a', function(event) { 
})

因为当脚本运行的因素不存在，该事件侦听器未添加到按钮。

来源

2017-01-24 18:40:02

尝试选择整个文档，并在“click”参数后选择您的元素。

$(document).on("click", ".dropdown-menu li > a", function(event){ 
    console.log("fire"); 
});

来源

2017-01-24 18:54:47

动态创建的元素不会触发触发器

回答

相关问题