javascript - 无法从ajax div调用javascript

Question

我使用 ajax 在我的页面中加载了一些内容。我想在单击某些 anchor 时运行 JS 函数。这些 anchor 属于使用ajax加载的代码。 ajax 请求和 JS 函数都位于一个单独的 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 调用。不起作用。 还尝试更改选择器以匹配我的 anchor 类(我为此声明了一个类)。也没有成功。最后还尝试在函数中添加一个名称，并在 anchor 内的 onclick="" 上调用它。再次失败。

我做错了什么？

Answer 1

由于 id 以 'aLancamentoEdit' 开头的元素是由 ajax 动态添加的，因此您需要将 click 处理程序绑定(bind)到父级:

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