我的借口:首先，我想解释一下，我一直在寻找答案。我发现了很多类似的问题，但没有一个能解决我的问题。
问题:在 Ajax 调用之后，我动态地添加了 HTML 代码，添加的代码失去了它的样式和操作响应(例如，在单击时)。
HTML :随页面加载加载的 HTML。它正确地呈现了用户图像的集合。我的意思是...样式没问题，JS 函数绑定(bind)到类“visualizaImagem”和“deletaImagem”工作正常。
<div class="row">
<div class="col-sm-12" id='imagens'>
<?php
if(isset($imagens)){
if(count($imagens) > 0){
foreach($imagens as $imagem){
echo "
<div class='file-box' data-path='" . $imagem['path'] . "' id='" . $imagem['nome'] . "'>
<div class='file'>
<a class='visualizaImagem' data-path='". $imagem['path'] ."'>
<div class='icon'>
<img src='../" . $imagem['path'] . "' style='height:100%'>
<a class='deletaImagem' data-path='". $imagem['path'] ."' data-divid='" . $imagem['nome'] . "'>
<i class='fa fa-trash' style='position:absolute;top:10px;left:10px;font-size:18px;'></i>
</a>
</div>
<div class='file-name'> " . $imagem['nome'] . "</div>
</a>
</div>
</div>";
}
}
}
?>
</div>
</div>
JS:当我点击上传按钮(不是此代码的一部分)时，图像数据通过“data: dados”传递，由特定 Controller 中的“salvaImagem”读取，然后附加到页面。该图像实际上是附加的，但没有 css 样式，也没有响应本应绑定(bind)到上述相同类的函数。
jQuery.ajax({
type: "POST",
url: "salvaImagem",
data: dados,
dataType: "json"}).done(function(response)
{
if(response.sucesso){
toastr['success'](response.msg);
var img = "" +
"<div class='file-box' id='" + response.nome + "' data-path='" + response.path + "'>" +
" <div class='file'>" +
" <a class='visualizaImagem' data-path='"+response.path+"'>" +
" <div class='icon'>" +
" <img src='../"+response.path+"' style='height:100%'>" +
" <a class='deletaImagem' data-path='"+response.path+"' data-divid='"+response.nome+"'>" +
" <i class='fa fa-trash' style='position:absolute;top:10px;left:10px;font-size:18px;'>" +
" </a>" +
" </div>" +
" <div class='file-name'> "+response.nome+"</div>" +
" </a>" +
" </div>" +
"</div>";
$('#imagens').append(img);
}
else{
toastr['error'](response.msg);
}
});
我想我应该多介绍一下代码。这是我如何将函数绑定(bind)到这些类的示例。实际上，当我在绑定(bind)中编写函数时，我预计不需要重新绑定(bind)。
$('.deletaImagem').on('click', function (){
var path = $(this).data('path');
var div_id = $(this).data('divid');
jQuery.ajax({
type: "POST",
url: "deletaImagem",
data: {'path':path},
dataType: "json"}).done(function(response)
{
if(response.sucesso){
toastr['success'](response.msg);
$('#'+div_id).remove();
}
else{
toastr['error'](response.msg);
}
});
return false;
});
尝试使用 friend 在这里给我的一些提示，我尝试了以下方法，但也没有成功。
jQuery.ajax({
type: "POST",
url: "salvaImagem",
data: dados,
dataType: "json"}).done(function(response)
{
if(response.sucesso){
toastr['success'](response.msg);
var img = <HTML original code here>
$(img).appendTo('#imagens').find('.deletaImagem').on('click', deletaImagem);
$('.visualizaImagem').on('click', visualizaImagem);
}
else{
toastr['error'](response.msg);
}
});
function deletaImagem(){
var path = $(this).data('path');
var div_id = $(this).data('divid');
jQuery.ajax({
type: "POST",
url: "deletaImagem",
data: {'path':path},
dataType: "json"}).done(function(response)
{
if(response.sucesso){
$('#'+div_id).remove();
toastr['success'](response.msg);
}
else{
toastr['error'](response.msg);
}
});
return false;
}
最佳答案
因为我假设您在 document.ready 上绑定(bind)事件(点击等...)，所以以后添加的任何新元素都不会有这些事件。
添加新元素后，只需再次添加事件即可。
$('#something').append("<div class='somethingWithClicklistener'>a</div>"); // It won't have the event, you have to add it
$('.somethingWithClicklistener').click(function(){ etc..
虽然这种方法可能会使预先存在的类的事件处理程序加倍，但您明白了这一点
至于样式，除非你使用 jquery 动画等，否则它不应该发生......
关于javascript - CSS 和 JQuery 在 Ajax 调用后不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37644761/