Search code examples
javascriptjqueryzurb-foundationzurb-foundation-5

Find out which close button closed an alertbox


I have an alert box with multiple close buttons:

<div data-alert class="alert-box cookies-consent">
    <div class="informative-text">
        Using cookies...
    </div>
    <div class="close-buttons">
        <a href="#" class="close sure">Sure</a>
        <a href="#" class="close opt-out">Opt Out</a>
    </div>
</div>

I registered a handler for the close event as the docs suggest:

$(document).on('close.fndtn.alert', function(event) {
   console.info('An alert box has been closed!');
   console.info(event);
});

But unless I've missed it, the event doesn't seem to indicate which of the buttons was clicked.

How should I modify my HTML/JS to find out which of the close buttons was clicked? I don't want to modify Foundation's own JS, and I do want the UI behavior to remain consistent for both buttons, nice transitions and all.


Solution

  • Here is working spinet as @Panomosh mentioned above:

    $('a.close').on('click',function(e){
      console.log($(e.target).text())
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <div data-alert class="alert-box cookies-consent">
        <div class="informative-text">
            Using cookies...
        </div>
        <div class="close-buttons">
            <a href="#" class="close sure">Sure</a>
            <a href="#" class="close opt-out">Opt Out</a>
        </div>
    </div>

    Greetings!