如何在刪除元素時防止冒泡的jQuery事件？

Question

根據jQuery文檔，event.stopPropagation();應該停止事件冒泡。在下面的腳本中，當我刪除event.stopPropagation();時，該函數將刪除ul元素代碼塊，包括它的所有子代。我加event.stopPropagation();停止冒泡，但它返回以下錯誤：

TypeError: undefined is not an object (evaluating 'event.stopPropagation')

以下是HTML和jQuery代碼：

$('span.remove').on('click', function() { 
 
    $(this).parent().hide(500, function(event) { 
 
    event.stopPropagation(); 
 
    $(this).parent().remove(); 
 
    }); 
 
});

.todo-list { 
 
    list-style: none; 
 
    padding: 0px; 
 
} 
 
.todo-item { 
 

 
    border: 2px solid #444; 
 
    margin-top: -2px; 
 
    padding: 10px; 
 
    cursor: pointer; 
 
    display: block; 
 
    background-color: #ffffff; 
 

 
} 
 
.remove { 
 
    float: right; 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    font-size: 0.8em; 
 
    color: #dd0000; 
 
} 
 
.remove:before { 
 
    content: 'X'; 
 
} 
 
.remove:hover { 
 
    color: #ffffff; 
 
} 
 
.todo-item::after:hover { 
 
    background-color: #dd0000; 
 
    color: white; 
 
} 
 
.todo-item:hover { 
 
    background-color: #0EB0FF; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class='todo-list'> 
 
    <li class='todo-item'>4L 2% Milk 
 
    <span class='remove'></span> 
 
    </li> 
 
    <li class='todo-item'>Butter, Unsalted 
 
    <span class='remove'></span> 
 
    </li> 
 
    <li class='todo-item'>Dozen Eggs 
 
    <span class='remove'></span> 
 
    </li> 
 
    <li class='todo-item'>Walk the dog 
 
    <span class='remove'></span> 
 
    </li> 
 
    <li class='todo-item'>Cut the lawn 
 
    <span class='remove'></span> 
 
    </li> 
 
    <li class='todo-item'>Laundry 
 
    <span class='remove'></span> 
 
    </li> 
 
</ul>

參考文獻：

1. How to delete parent element using jQuery?
2. How to stop events bubbling in jQuery?

Answer 1

你必須從click()回調讓你event對象。如果你看看jquery hide() api docs，完整的回調沒有傳遞任何東西，所以你的事件是未定義的，但the click() handler另一方面傳遞事件對象。所以你只需要改變你的javascript到：

$('span.remove').on('click', function(event) { 
    event.stopPropagation(); 
    $(this).parent().hide(500, function() { 
    $(this).parent().remove(); 
    }); 
}); 

然而，整個列表被刪除的原因是另一個問題。你引用parent()兩次，目標是ul被刪除，所以剛剛擺脫其中一個父母（將範圍$(this)更改爲父隱藏回調）。有了這個編輯的代碼是：

$('span.remove').on('click', function(event) { 
    event.stopPropagation(); 
    $(this).parent().hide(500, function() { 
    $(this).remove(); 
    }); 
}); 

這是真的然而，事件的傳播，並沒有真正有什麼用ul被隱藏作爲一個整體，所以你可以只取出event.stopPropagation()線。最終代碼是：

$('span.remove').on('click', function() { 
    $(this).parent().hide(500, function() { 
    $(this).remove(); 
    }); 
}); 

Answer 2

將事件obj移動到委派的點擊事件。

而不是this使用event.target。

$('span.remove').on('click', function(event) { 
 
    var tgt = event.target; 
 
    $(tgt).parent().hide(500, function() { 
 
    $(tgt).parent().remove(); 
 
     
 
    }); 
 
    
 
});

.todo-list { 
 
    list-style: none; 
 
    padding: 0px; 
 
} 
 
.todo-item { 
 

 
    border: 2px solid #444; 
 
    margin-top: -2px; 
 
    padding: 10px; 
 
    cursor: pointer; 
 
    display: block; 
 
    background-color: #ffffff; 
 

 
} 
 
.remove { 
 
    float: right; 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    font-size: 0.8em; 
 
    color: #dd0000; 
 
} 
 
.remove:before { 
 
    content: 'X'; 
 
} 
 
.remove:hover { 
 
    color: #ffffff; 
 
} 
 
.todo-item::after:hover { 
 
    background-color: #dd0000; 
 
    color: white; 
 
} 
 
.todo-item:hover { 
 
    background-color: #0EB0FF; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class='todo-list'> 
 
    <li class='todo-item'>4L 2% Milk 
 
    <span class='remove'></span> 
 
    </li> 
 
    <li class='todo-item'>Butter, Unsalted 
 
    <span class='remove'></span> 
 
    </li> 
 
    <li class='todo-item'>Dozen Eggs 
 
    <span class='remove'></span> 
 
    </li> 
 
    <li class='todo-item'>Walk the dog 
 
    <span class='remove'></span> 
 
    </li> 
 
    <li class='todo-item'>Cut the lawn 
 
    <span class='remove'></span> 
 
    </li> 
 
    <li class='todo-item'>Laundry 
 
    <span class='remove'></span> 
 
    </li> 
 
</ul>

Answer 3

多個問題：

1. 的event變量沒有被傳遞。不要在hide()函數中包含event參數，而應在on()事件處理程序中包含該參數。這應該會阻止錯誤。
2. 您正在移除父項的父項。替換以下行：$(this).parent().remove();與$(this).remove();
3. 實際上您並不需要stopPropagation()。解決上述兩個問題後，你不需要它。 click事件不傳播。