Thanks in advance. My html contains:
<div class="help-link">
<a href="">WHY?</a>
</div>
and
<div class="modal-container">
<div data-id="modal1" class="status-modal modal">
<div class="modal-body">
<header>Status</header>
<p><span class="fnt-wt-500"></span> Lorem Ipsum is simply
dummy text of the printing and typesetting industry.</p>
<p><span class="fnt-wt-500"></span> Lorem Ipsum has been
the industry's standard dummy text ever since the 1500s.</p>
<p><span class="fnt-wt-500"> </span>Various versions have
evolved over the years, sometimes by accident.</p>
<div class="modal-footer clearfix">
<a href="#" class="close">OK</a>
</div>
</div>
</div>
</div>
<div class="modal-backdrop">
</div>
JQuery code is like
$(document).ready(function() {
$(".help-link a").click(function(e) {
console.log("help link a clicked ");
e.preventDefault();
if (!$(".modal-backdrop, .modal-container").hasClass("open")) {
$(".modal-backdrop, .modal-container").addClass("open");
} else {
$(".modal-backdrop, .modal-container").removeClass("open");
}
});
});
}
But I am not able to log event for the click on help-link a. Please help. Did I miss something in jquery?
You have an extra curly braces at the end of this function
$(document).ready(function() {
$(".help-link a").click(function(e) {
console.log("help link a clicked ");
e.preventDefault();
if (!$(".modal-backdrop, .modal-container").hasClass("open")) {
$(".modal-backdrop, .modal-container").addClass("open");
} else {
$(".modal-backdrop, .modal-container").removeClass("open");
}
});
});
**}**
Remove it and it will work