Question

我正在尝试使用jQuery处理click事件

关于上传成功，我使用jQuery创建以下内容：

$("#uploadedImage").append( "<div class='img-wrap'>
    <span class='deletePhoto'>&times;</span>
    <img data-id='"+files[i]+"' src='"+asset_url+"uploads/ad_photo/"+files[i]+"'>
  </div>
  <span class='gap'></span>");

并且为了处理上面创建的div的点击事件，我写了这个：

$('.img-wrap .deletePhoto').click(function() {
  var id = $(this).closest('.img-wrap').find('img').data('id');
  alert(id);
});

上面的代码工作正常并创建所有div，但是当我点击deletePhoto范围时。没有显示jQuery警报。

任何帮助或建议都会有很大帮助。

提前致谢

Answer 1

委派活动并按照建议进行更改：

$("#uploadedImage").on('click', '.deletePhoto', function() {

您必须将您的活动委派给您的案例中最接近的静态父#uploadedImage ，该页面加载时可用于保存新添加的div和图像的容器。

虽然$(document) and $(document.body)始终可用于委派活动。

Answer 2

最好在加载DOM后创建新元素时使用on（）。

$(document).on('click', '.img-wrap .deletePhoto', function() {

});

Answer 3

您正在动态创建元素，这就是您需要.live()的原因但此方法在较新版本中已弃用。如果你想使用jquery 1.10或更高版本，你需要以这种方式调用你的行为：

$(document).on('click','element',function(){
  `your code goes in here`
})

Answer 4

试试这个：

$(".img-wrap .deletePhoto").on('click', function() {

});

Answer 5

首先检查调试模式，当你的代码要绑定click事件时，你得到的长度和另一个事件绑定事件必须在追加该元素之后写入。

并检查您点击的元素（高度和宽度）的css，是

$(document).on('click','Your Element',function(){
  //your code goes in here
});

行得正常

Answer 6

使用delegate：

$('#uploadedImage').on('click','.img-wrap .deletePhoto',function() {
  var id = $(this).closest('.img-wrap').find('img').data('id');
  alert(id);
});

查看详情委托和.on here

Answer 7

您可以在代码中稍微更改一下。

$(".deletePhoto").off("click").on("click",function(){
  //Your Code here
});

点击事件不工作jQuery

7 个答案: