防止僅使用子僞選擇器的默認功能

我正在使用jQuery在用戶每次單擊鏈接（「.add-event」）時動態添加元素。此元素中還包含一個圖標，用於在用戶選擇時刪除整個元素。如果元素是頁面上最後一個元素，我想要隱藏或禁用此刪除圖標。這是我到目前爲止已經試過：防止僅使用子僞選擇器的默認功能

$(document).on('click','.close_box2:only-child',function(){ 
    event.preventDefault(); 
});

和

if($('.event').length===1) { 
    $('.close_box2').hide() 
}

HTML：

<div class="event"> 
    <span class="close_box2"><i class="icon-remove"></i></span> 
    <span class="add-event">Add Event</span> 
</div>

我在做什麼錯！？由於

來源

2013-02-13 Mac10

至少第二個工程：http://jsfiddle.net/KPY9r/ – 2013-02-13 20:28:07

哇很好的電話，我必須有一些其他的錯誤或衝突在我的網頁，阻止這個工作。謝謝！ – Mac10 2013-02-13 20:42:57

下看起來更好，對於性能：

$('.close_box2:only-child').on('click', function(event){ 
    event.preventDefault(); 
});

來源

2015-01-16 13:44:05 SvenV

表演在哪？這需要花費更長的時間來連接，因爲它執行搜索「前端」，並導致多個處理程序，而他們使用的委託「on」以閃電般的速度將一個處理程序連接到「文檔」（並且您不在意微小的延遲事件時間，因爲你不能點擊快速注意！）:) – 2015-01-16 16:34:44

的jsfiddle：http://jsfiddle.net/TrueBlueAussie/KPY9r/6/

你只是要檢查「最後一個」刪除處理程序中：

// initial hide of sole close button 
$('.close_box2').hide(); 

// On add, clone the template and show all close buttons 
$(document).on('click', '.add-event', function() { 
    // Create a new event based on the template 
    $('#events').append($('#template').html()); 
    // Show all close buttons (as we must now have > 1 event) 
    $('.close_box2').show(); 
}); 

$(document).on('click', '.close_box2', function (e) { 
    $(this).closest('.event').remove(); 
    // Is there only one left? 
    if ($('.event').length === 1) { 
     // Hide the close box on the last event 
     $('.close_box2').hide() 
    } 
});

備註：

我使用虛擬<script>元素來容納你的HTML模板。這比克隆頁面上的元素要好，並且比代碼中的內嵌HTML字符串要好得多。

來源

2015-01-16 16:45:38

防止僅使用子僞選擇器的默認功能

回答

相關問題