无法从Ajax div调用JavaScript

Question

我使用ajax在页面中加载了一些内容。 单击某些锚点后，我想运行JS函数。 这些锚点属于使用ajax加载的代码。 ajax请求和JS函数都位于jQuery(document).ready(function() { 。

我在这个JS文件中有几十个函数，它们运行良好，但是这个特定的函数是使用ajax检索的代码调用的唯一函数，并且不起作用。 我的代码：

html主文件：

<!-- code -->
<div id="ajaxContentGoesHere">
<!-- content inserted here by ajax function -->
<td><a href="#" id="aLancamentoEdit<?php echo $lancamento['Lancamento']['lan_itid']; ?>">Editar</a></td>
</div>    
<script src="/js/myJS.js"></script>
</body> 

/js/myJS.js文件：

jQuery(document).ready(function() {
/*some other functions here*/
 $("[id^='aLancamentoEdit']").click(function(){
        console.log(1);
}
});

我试图将$("[id^='aLancamentoEdit']").click(function(){放在html主文件中，放在/js/myJS.js调用后的标记中。不起作用。尝试更改选择器以匹配我的锚定类（为此我声明了一个类）。也没有成功。最后还尝试在函数中放置一个名称，并在锚定内的onclick=""上调用它。再次失败。

我究竟做错了什么？

Answer 1

由于以'aLancamentoEdit'开头的id为id的元素是由ajax动态添加的，因此您需要将click handler绑定到parent：

$('#ajaxContentGoesHere').on('click', "[id^='aLancamentoEdit']", function() {
   console.log(1);
});

Answer 2

将.on()用于动态元素事件（在您的情况下为ajax内容）。 尝试：

jQuery(document).ready(function() {
/*some other functions here*/
 $("#ajaxContentGoesHere").on("click","[id^='aLancamentoEdit']",function(){
        console.log(1);
}
});