$(window).load(function() {
$("#Button").click(function() {
alert('clicked')
$("#div").load(" #div > *");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<button id="Button" class="btn btn-warning">Refresh</button>
<div class="col-md-3" id="div">
<div class="alert alert-warning alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Holy guacamole!</strong>
</div>
<div class="alert alert-danger alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Holy guacamole!</strong>
</div>
<div class="alert alert-success alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Holy guacamole!</strong>
</div>
</div>
这是当我单击
刷新按钮
时尝试重新加载
div 的代码,没有任何反应,因为我是学习者jQuery 和 JS 的我对此了解不多。
Fiddle链接
谢谢
热情
最佳答案
在 jQuery 版本 3 中,函数加载和事件加载的处理方式不同。
所以在你的代码中你需要编写:
$(window).on('load', function (e) {
有关详细信息,请查看jQuery 3.0 :
Removed deprecated event aliases
.load, .unload, and .error, deprecated since jQuery 1.8, are no more. Use .on() to register listeners.
由于 Bootstrap v3 与 jQuery v3 不兼容(请参阅 bootstrap issues 16834 ),我在代码片段中更改为 jQuery 1.x。
我的片段:
$(window).on('load', function (e) {
$('#MyButton').on('click', function (e) {
alert('clicked')
$("#div").load(" #div > *");
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<button id="MyButton" class="btn btn-warning">Refresh</button>
<div class="col-md-3" id="div">
<div class="alert alert-warning alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Holy guacamole!</strong>
</div>
<div class="alert alert-danger alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Holy guacamole!</strong>
</div>
<div class="alert alert-success alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Holy guacamole!</strong>
</div>
</div>
关于javascript - Onclick 仅重新加载 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38413200/