Đặt phần tử thành không thể nhấp và sau đó có thể nhấp

Question

Tôi muốn có một phần tử div được đặt thành không thể nhấp và sau đó đặt thành phần tử có thể nhấp sau khi một phần tử khác được nhấp.

Vì vậy, khi .case được nhấp:

$('.case').click(function() { 
$('#patient').addClass('active').on('click'); 
}); 

Nhưng làm thế nào để tôi thiết #patient để thể nhấp vào trong trường hợp đầu tiên khi tôi có tiếp tục xuống:

$('#patient').click(function() { 
alert('clicked'); 
}); 

Answer 1

$('#patient').on('click', function() { 
    if ($(this).hasClass('active')) { 
     // do whatever when it's active. 
    } 
    return false; 
}); 

Nếu bạn chỉ muốn nó không chấp nhận, bạn có thể thêm nó vào css của bạn (pointer-events):

#patient { pointer-events: none; } 
#patient.active { pointer-events: auto; } 

Answer 2

$('#patient').unbind("click"); 

Tôi hy vọng điều này sẽ hiệu quả.

Answer 3

Sử dụng kích hoạt

$('#patient').addClass('active').trigger('click'); 

THAM KHẢO: .trigger()

Answer 4

Tùy thuộc vào nhu cầu của bạn (Chỉ có một yếu tố hoặc nhiều người, tạo yếu tố năng động hay không), bạn có thể sử dụng:

1) Một biến để kiểm tra xem nhấp chuột đầu tiên trên phần tử khác đã được thực hiện chưa

var isActive = false; 

$('.case').click(function() { 
    isActive = true; 
}); 

$('#patient').click(function(){ 
    if(isActive === false) 
     return false; 

    //Your behaviour 
}); 

2) Xác định các chức năng nhấp chuột trong sự kiện click của phần tử đầu tiên

$('.case').on('click',function() { 
    //Make element clickable 
    $('#patient').on('click',function(){ 
     //Your behaviour 
    }); 
}); 

Sau đó, bạn có thể sử dụng off để loại bỏ các sự kiện click

Answer 5

for first instance..add deactive class to patient div tag... 

$('#patient').click(function() { 
if($(this).hasClass('deactive')) 
return; 
else 
//do what you want to do. 
}); 

on case click... 

$('.case').click(function() { 
$('#patient').removeClass('deactive'); 
}); 

Answer 6

không nhấp được:

$("#ElementName").css("pointer-events","none"); 

Clickable :

$("#ElementName").css("pointer-events","auto");