I've implemented a clever trick within a div, where I have included my own custom "data" indicating what action to take when the user clicks on it.
My JavaScript code snippet is as follows (with some code omitted for clarity):
$('[data-hqf-switch]').click(function() {
var t = $(this).attr('data-hqf-switch').split('/'),
i = 0;
if (t % 2) {
alert('Burn the dev. Its the dev. himself who wrote that.');
return;
}
while (i < t.length) {
var ev = sw(t[i++], '$')+'.'+sw(t[i++], 'd')+';';
eval(ev);
}
});
In my HTML file, I have something similar to this:
<div class="col-lg-12" data-hqf-switch="$.pt().pv()/Xd/$.pt()/Xu">
<h4>25 mars 2016 22:07 - You wrote...</h4>
<p>J'ai refusé votre invitation</p>
<button type="button" class="btn btn-default"
data-toggle="modal"
data-target="#modal-msg-7-24" title="Répondre">
<i class="fa fa-envelope-o"></i> Répondre
</button>
<div class="modal fade" id="modal-msg-7-24" tabindex="-1"
role="dialog"
aria-labelledby="Envoyer un message" aria-hidden="true"
style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
<button class="btn btn-warning"
data-hqf-switch="$.pt().pt().pv()/Xd/$.pt().pt()/Xu">
Fermer
</button>
</div>
The primary focus is on the first button: upon clicking it, the modal dialog box appears which is immediately after the button in the code.
All functionalities should work smoothly except that when you click the button, it triggers both the button's event and the surrounding div event simultaneously.
What am I overlooking here?