为什么jQuery的父母（）找不到我的元素？

我只是不能得到这个（很简单）功能正常工作，父母（）似乎并没有找到我想要的股利，并淡出出来:(为什么jQuery的父母（）找不到我的元素？

$('.deleteButton').click(function() { 

    var img = $(this).attr('href'); 
    img = "../"+img; 

    var answer = confirm('Are you sure you want to delete this item? (This cannot be undone!)'); 
    if (answer) { 

     $.ajax({ 
      url: 'scripts/deletePhoto.php', 
      data: 'img='+img, 
      type: 'POST', 
      mode: 'abort', 
      success: function(){ 
       $(this).parents("div.photo").fadeOut('fast'); 
      } 
     }); 
    } 
return false; 
});

HTML

<div class="photo"> 
    <img alt="" src="../static/images/photos/tmp/1.jpg"> 
    <div class="overlay" style="opacity: 0;"> 
     <p class="process success message"> 
      <a href="process_photo.php?img=../static/images/photos/tmp/1.jpg">Process this photo</a> 
     </p> 
     <p class="delete error message"> 
      <a href="../static/images/photos/tmp/1.jpg" class="deleteButton">Delete image</a></p> 
    </div> 
</div>

我试过$(this).parents(".photo").fadeOut('fast');和$(this).cloest("div.photo").fadeOut('fast');但没有什么是连接:(

来源

2013-03-11 Chuck Le Butt

$（this）将用于ajax函数。不是点击处理程序 – 2013-03-11 12:53:27

啊！谢谢，拉维！ – 2013-03-11 12:53:50

这是一个范围内的问题，从阿贾克斯success回调，this并不是指你所想象的那样 - 它重新字面上的功能本身。

您应该缓存的$(this)副本Ajax调用之外，并使用：

$('.deleteButton').click(function() { 
    var $img = $(this); 

    //....// 

    $.ajax({ 
     url: 'scripts/deletePhoto.php', 
     data: 'img='+img, 
     type: 'POST', 
     mode: 'abort', 
     success: function(){ 
      $img.parents("div.photo").fadeOut('fast'); 
     } 
    }); 

    // ... // 
}

来源

2013-03-11 12:53:50 Jamiec

不知道你是否想把$放在变量的前面？这不会乱用jQuery吗？ – 2013-03-11 13:10:06

@DjangoReinhardt - 不，这完全是故意的。在许多jQuery开发人员中，当它引用一个jQuery对象时，它使用'$'作为变量名称的前缀。这会阻止你双重包装一个变量，不会，它不会影响jQuery。 – Jamiec 2013-03-11 14:23:55

很酷。感谢您的解释！在你的例子中， – 2013-03-11 22:00:54

你需要缓存当前事件，并使用这些变量。这是一个范围界定问题。

var currObj=$(this); cache the current event and use those variable. 

$('.deleteButton').click(function() { 
var $currObj=$(this); // cache the current event. 
    var img = currObj.attr('href'); 
    img = "../"+img; 

    var answer = confirm('Are you sure you want to delete this item? (This cannot be undone!)'); 
    if (answer) { 

     $.ajax({ 
      url: 'scripts/deletePhoto.php', 
      data: 'img='+img, 
      type: 'POST', 
      mode: 'abort', 
      success: function(){ 
       $currObj.parents("div.photo").fadeOut('fast'); 
      } 
     }); 
    } 
return false; 
});

来源

2013-03-11 12:54:04

，'currObj'已经是一个jQuery对象 - 所以不需要再把它包装在'$（）'中！ – Jamiec 2013-03-11 12:55:45

一个很好的习惯是使用$作为jQuery对象：var $ currObj = $（this）; – 2013-03-11 12:59:37

@SteveWellens更新 – 2013-03-11 13:00:32

你找不到你的对象的原因是因为$(this)不指向你认为它指向的对象。您正在Ajax调用的回调函数中使用它，其上下文与click事件处理程序的上下文不同。

坚持在一个变量，你做的Ajax调用之前，那么你会被罚款：

$('.deleteButton').click(function() { 

    var img = $(this).attr('href'); 
    img = "../"+img; 

    var answer = confirm('Are you sure you want to delete this item? (This cannot be  undone!)'); 
    if (answer) { 

     var my_item = $(this); 

     $.ajax({ 
      url: 'scripts/deletePhoto.php', 
      data: 'img='+img, 
      type: 'POST', 
      mode: 'abort', 
      success: function(){ 
       my_item .parents("div.photo").fadeOut('fast'); 
      } 
     }); 
    } 
return false; 
});

来源

2013-03-11 12:54:10 Flater

里面你必须保持在按下按钮的引用单击处理程序，否则this会“重写” 的AJAX成功处理程序中：

$('.deleteButton').click(function() { 
    var img = $(this).attr('href'), 
    $self = $(this); 

    img = "../"+img;

然后，成功处理程序中：

$self.parents("div.photo").fadeOut('fast');

顺便说一句，我会建议把$.ajax调用这里面的变化：

data: 'img=' + encodeURIComponent(img),

这避免了潜在发送一个畸形的查询字符串到你的服务器端脚本。

来源

2013-03-11 12:56:45

为什么jQuery的父母（）找不到我的元素？

回答

相关问题