Reputation: 59
Here is my code, in these all href tag having click event by its class name, and img also have mouse over tooltip event. i want disable all these events when click a button its called edit.
<div style="float:right" class="user_athen_container">
<a href="#" id="addop" style="margin:10px 3px;overflow:auto;float:right;" title="Add Opportunity" rel="tooltip"><img src="images/add_op.png"></a>
<a href="#" id="addcus" class="show_add_cust" style="margin:10px 3px;overflow:auto;float:right;" title="Add Customer" rel="tooltip"><img src="images/add_cusomer.png"></a>
<a href="#" id="addso" style="margin:10px 3px;overflow:auto;float:right;" title="Add SO" rel="tooltip"><img src="images/add_so.png"></a>
<img src="images/view_submission_icon.png" class="view_file" title="View Log Submission Policy" rel="tooltip" style="margin: 10px 3px; overflow: auto; float: right;">
</div>
What am trying is :
$(document).on('click', '#btn_edit', function(e) {
$('.user_athen_container').prop('disabled', true);
});
And i want to enable all events in cancel button :
$("#canceledit").click(function() {
$('.user_athen_container').prop('disabled', false);
});
Here is my code
Upvotes: 0
Views: 1451
Reputation: 43156
You can delegate the event handlers to a common parent and bind/unbind it as follows:
$(document).ready(function(){
$("#btn_edit").click(function () {
$('.user_athen_container').off();
});
$("#canceledit").click(function () {
bindEvents()
});
bindEvents()
});
function bindEvents(){
$('.user_athen_container').on("mouseout",".view_file",function () {
$(".view_file").css("background-color", "lightgray");
});
$('.user_athen_container').on("click","#addso",function () {
alert("ADDSO PROCESS");
});
$('.user_athen_container').on("click","#addop",function () {
alert("ADDOP PROCESS");
});
}
Upvotes: 1