Jquery:加载innerHTML后执行jquery函数
Jquery:加载innerHTML后执行jquery函数
提问于 2018-08-29 01:14:39
在创建InnerHTML之后，我尝试执行一个简单的单击函数，但它不起作用。控制台中显示无。
$(document).ready(function() {
var lorum = "Lorem ipsum dolor sit amet, leo nulla ipsum vivamus, augue tempor inceptos sed nam rhoncus. Rhoncus montes litora. Praesent ut ad ornare fusce posuere in, libero bibendum, et adipiscing. <a href='#' id='hue'> You can click here </a>";
$('button').click(function() {
$('#content').html(lorum);
});
$(function() {
$('#hue').click(function() {
$('#content-2').html(lorum);
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button>Generate</button> <br><br>
<div id="content"></div>
<div id="content-2"></div>
</body>
回答 3
Stack Overflow用户
发布于 2018-08-29 01:43:03
$(document).ready(function() {
var lorum = "Lorem ipsum dolor sit amet, leo nulla ipsum vivamus, augue tempor inceptos sed nam rhoncus. Rhoncus montes litora. Praesent ut ad ornare fusce posuere in, libero bibendum, et adipiscing. <a href='#' id='hue'> You can click here </a>";
$('button').click(function() {
$('#content').html(lorum);
$('#hue').click(function() {
console.log("clicked a");
$('#content2').html(lorum);
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button>Generate</button> <br><br>
<div id="content"></div>
<div id="content2"></div>
</body>
Stack Overflow用户
发布于 2018-08-29 01:43:24
我对你的代码做了一些调整。
脚本如下：
$(document).ready(function(){
var lorum = "Lorem ipsum dolor sit amet, leo nulla ipsum vivamus, augue tempor
inceptos sed nam rhoncus. Rhoncus montes litora. Praesent ut ad ornare fusce posuere
in, libero bibendum, et adipiscing. <a href='#' id='hue'> You can click here </a>";
$('button').click(function(){
$('#content').html(lorum);
$('#hue').click(); //the trigger
});
$(function() {
$(document).on('click','#hue',function() { //the listener
$('#content-2').html(lorum);
});
});单击<button>后，您需要触发要单击的#hue。
然后是#hue的事件单击侦听器。您需要使用jquery on()方法，而不仅仅是click()，因为#hue在DOM加载后不存在。
有关更多信息，请参阅此链接。http://api.jquery.com/on/
Stack Overflow用户
发布于 2018-08-29 01:26:51
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var lorum = "Lorem ipsum dolor sit amet, leo nulla ipsum vivamus, augue tempor inceptos sed nam rhoncus. Rhoncus montes litora. Praesent ut ad ornare fusce posuere in, libero bibendum, et adipiscing. <a href='#' id='hue'> You can click here </a>";
$('button').click(function(){
$('#content').html(lorum);
});
$(function() {
$('#hue').click(function() {
$('#content-2').html(lorum);
});
});
});
</script>
</head>
<body>
<button>Generate</button> <br><br>
<div id="content"></div>
<div id="content-2"></div>
</body>
</html>
只需将脚本替换为标题即可
我将您的脚本转换为Header部分
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52063225
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号