爲什麼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的父母（）找不到我的元素？

回答

相關問題