jQuery點擊任何東西，但與類鏈接

當刪除鏈接被點擊了新的確認鏈接滑入視圖。如果確認鏈接也被點擊，則表格行應被刪除。

如果用戶點擊其他任何地方其他但這個鏈接的鏈接應通過切換類delete-btn-show和delete-btn-hide滑回視圖。

希望這個澄清的東西:)

下面是一個表格列表。每行都有一個垃圾桶圖標，通過切換類打開一個div（.delete-btn）。如果一個delete-btn可見（具有類.delete-btn-show），它應該通過切換類來隱藏自己（delete-btn-show/-hide）如果鏈接被點擊，它應該刪除該行。我設法顯示div，但無法達到所需的行爲。幫助都是歡迎的。

（jQuery的是一個文檔準備功能內）

$('.delete-supplier-link').click(function(){ 
    $(this).parent().parent().find('.delete-btn').toggleClass('delete-btn-show delete-btn-hide'); 
}); 


<a class="delete-supplier-link" href="#"> 
    <i class="fa fa-trash"></i> 
</a>

這裏是表結構

<table class="table table-hover" id="curr-suppliers-listing"> 
    <tbody> 
    <tr> 
     <td> 
     <span class="suppl-org"> 
      Some organization 
     </span> 
     <span class="supplier-of"> 
      Some product or service 
     </span> 
     <span class="supplier-contact"> 
      Some dude 
     </span> 
     </td> 
     <td class="alignR"> 
     <div class="delete-btn delete-btn-hide"> 
      <a class="delete-string" href="#"> 
      Delete 
      </a> 
     </div> 
     <span> 
      D.O.P. 
     </span> 
     <span> 
      2011-11-12 
     </span> 
     <span> 
      <a class="delete-supplier-link" href="#"> 
      <i class="fa fa-trash"></i> 
      </a> 
     </span> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <span class="suppl-org"> 
      Some organization 
     </span> 
     <span class="supplier-of"> 
      Some product or service 
     </span> 
     <span class="supplier-contact"> 
      Some dude 
     </span> 
     </td> 
     <td class="alignR"> 
     <div class="delete-btn delete-btn-hide"> 
      <a class="delete-string" href="#"> 
      Delete 
      </a> 
     </div> 
     <span> 
      D.O.P. 
     </span> 
     <span> 
      2011-11-12 
     </span> 
     <span> 
      <a class="delete-supplier-link" href="#"> 
      <i class="fa fa-trash"></i> 
      </a> 
     </span> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <span class="suppl-org"> 
      Some organization 
     </span> 
     <span class="supplier-of"> 
      Some product or service 
     </span> 
     <span class="supplier-contact"> 
      Some dude 
     </span> 
     </td> 
     <td class="alignR"> 
     <div class="delete-btn delete-btn-hide"> 
      <a class="delete-string" href="#"> 
      Delete 
      </a> 
     </div> 
     <span> 
      D.O.P. 
     </span> 
     <span> 
      2011-11-12 
     </span> 
     <span> 
      <a class="delete-supplier-link" href="#"> 
      <i class="fa fa-trash"></i> 
      </a> 
     </span> 
     </td> 
    </tr> 
    </tbody> 
</table>

來源

2014-09-01 user1425385

我不知道如果我理解你問什麼正確，但是，檢查此琴：

http://jsfiddle.net/yp9znej8/

$(function() { 
    $(document).on('click', '.delete-btn-show', function() { 
     $(this).closest('tr').remove(); 
     // to remove the table line when clicking the button 
     // using .delete-btn-show to only remove when the button is visible 
    }); 
});

如果這不是你想要的，你應該改變你的問題以獲得更好的可讀性。

@UPDATED

看看這個小提琴：http://jsfiddle.net/L1nsanqf/3/

的事情就是停止事件的傳播，所以它不與其他活動衝突.. 不知道這是最好的方式這樣做的..但是，工作了，我覺得這是你想要

來源

2014-09-01 22:29:52

這是相當不錯的。有一件事，如果類delete-btn-show已經被分配給一個div（即一個刪除按鈕已經進入視圖），那麼將刪除鏈接滑入視圖的其他鏈接也不應該將另一個刪除鏈接滑動到視圖中已經可見。相反，它應關閉任何可見的刪除鏈接，然後在下次單擊垃圾桶圖標時，應將刪除鏈接滑入視圖。換句話說，您一次無法查看多個刪除鏈接。 – user1425385 2014-09-02 07:42:43

這是一行代碼：http：// jsfiddle。net/L1nsanqf/5/ 請記住，您應該重構此代碼，因爲有幾項可以完成的改進。 – 2014-09-02 14:41:26

也許你應該使用這個代碼是什麼：

$('.delete-btn').each(function() { 
    $(this).click(function() { 
    $(this).parent().parent().remove(); 
    }); 
    });

對於每個div都以'delete-btn'作爲css類，它定義了與刪除行的click事件關聯的函數。

來源

2014-09-01 22:30:27

你可以有點擊氣泡一路攀升至<body>，檢查是否$（這）是刪除，BTN，並作出相應的反應：

$("body").on("click", function(){ 
    if ($(this).hasClass("delete-btn")){ 
     // Do some deleting, this is a delet button! 
    } else { 
     // Hide the button, this is some other element 
     $(".delete-btn").removeClass("delete-btn-show").addClass("delete-btn-hide"); 
    } 
});

來源

2014-09-01 22:31:29

jQuery點擊任何東西，但與類鏈接

回答

相關問題