CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nithin
Nithin

Reputation: 45

JQUERY, CSS, event handlers

I am supposed to use Jquery to call a function that changes a div's visibility using css. This is my JQUERY

    alert("Interactive on line");
    function changeView(page)
        {
              alert("Handler for click() called. ");
              if(page === 'home)
                 {
                    $('#HomeTab'.css(display=='none'));
                 }
        }
    $('#HomeTab').on('click', { page:'home'}, changeView());

I used the alert statement inside the changeView to see if changeView ever gets called and it does not. The initial alert before the changeView function does get called, so the script is linked correctly. Thank you in advance!

Upvotes: 0

Views: 91

Answers (1)

Rayon
Rayon

Reputation: 36609

Refer .on( events [, selector ] [, data ], handler )

(a) You are invoking/calling function, not assigning it as handler, Remove () after function name.

(b) data object could be accessed using event.data.KEY

(c) Also correct the typo while using .css method, it is jQueryElement.css(PROPERTY,VALUE)

function changeView(e) {
  alert("Handler for click() called. ");
  if (e.data.page === 'home') {
    $('#HomeTab').css('display', 'none');
    //OR $('#HomeTab').hide();
  }
}
$('#HomeTab').on('click', {
  page: 'home'
}, changeView);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id='HomeTab'>Home Tab</div>

Upvotes: 4

Related Questions