Uncaught TypeError: Cannot read property 'prop' of undefined in toggle functionality

Question

Using jQuery 1.10.

I am trying to manually implement something similar to the two handler signature of toggle() function now that it's deprecated since jQuery 1.8 . I am reusing my code for two sections - Email notifications and Web notifications. Both have a TurnOff/TurnOn button with toggle like functionality.

JS

(function($) {
  "use strict";
  Drupal.behaviors.toggleNotificationBoxes = {    
    attach: function(context, settings) {      

      var $emailCheck = $('#edit-email-notification');
      var $emailItems = $('.form-item-email-notify');
      var $emailToggle = $('#email-notification-toggle');
      var $webCheck = $('#edit-web-notification');
      var $webItems = $('.form-item-web-notify');
      var $webToggle = $('#web-notification-toggle');

      stateCheck($emailCheck, $emailItems);
      stateCheck($webCheck, $webItems);

      function stateCheck($checkEl, $itemsEl) {
        if ($checkEl.prop("checked") == false) {
          $itemsEl.css({ "opacity": "0.5", "pointer-events": "none" });
        }
      }

      $emailToggle.on('click', function() { stateToggle($emailCheck, $emailToggle, $emailItems); });
      $webToggle.on('click', function() { stateToggle($webCheck, $webToggle, $webItems); });

      function stateToggle($checkEl, $toggleEl, $itemsEl) {
        //console.log($checkEl, $toggleEl, $itemsEl);
        if ($checkEl.prop("checked") == false) {
          $toggleEl.val("TURN OFF");
          $checkEl.prop("checked", true);
          $itemsEl.css({ "opacity": "1", "pointer-events": "auto" });
        } else if ($checkEl.prop("checked") == true) {
          $toggleEl.val("TURN ON");
          $checkEl.prop("checked", false);
          $itemsEl.css({ "opacity": "0.5", "pointer-events": "none" });
        }
        $toggleEl.one('click', function() { stateToggle($checkEl, $toggleEl, $itemsEl); });
        setTimeout(stateToggle, 1);
      }
    }  
  };
})(jQuery);

Rendered HTML

<div>
  <div class="email-notification">
    <div class="form-item form-type-checkbox form-item-email-notification">
      <input type="checkbox" id="edit-email-notification" name="email_notification" value="1" checked="checked" class="form-checkbox">
      <label class="option" for="edit-email-notification">Email is enabled </label>
    </div>
    <input type="button" class="notification-toggle-button" id="email-notification-toggle" value="TURN ON">
    <div class="form-item form-type-checkboxes form-item-email-notify" style="opacity: 0.5; pointer-events: none;">
      <label for="edit-email-notify">Email me when </label>
      <div id="edit-email-notify" class="form-checkboxes">
        ...//irrelevant code
        </div>
  </div>
  <div class="web-notification">
    <div class="form-item form-type-checkbox form-item-web-notification">
      <input type="checkbox" id="edit-web-notification" name="web_notification" value="1" checked="checked" class="form-checkbox">
      <label class="option" for="edit-web-notification">Web is enabled </label>
    </div>
    <input type="button" class="notification-toggle-button" id="web-notification-toggle" value="TURN ON">
    <div class="form-item form-type-checkboxes form-item-web-notify" style="opacity: 0.5; pointer-events: none;">
      <label for="edit-web-notify">Notify me when </label>
      <div id="edit-web-notify" class="form-checkboxes">
       ...//irrelevant code
        </div>
    </div>
  </div>
  <input type="submit" id="edit-submit--3" name="op" value="SAVE CHANGES" class="form-submit">
  <input type="hidden" name="form_build_id" value="form-ZlmPEjNntLlfxbZ5f94tbPKTPF8kFCfR-3Q_WmCXTTI">
  <input type="hidden" name="form_token" value="JUkMkak09JF_qSbGsfQAHRxUtNrQn2EpPx9z8m-Ljcw">
  <input type="hidden" name="form_id" value="user_notification_form">
</div>

I'm working on Drupal 7 that's why I make use of drupal behaviour in my js instead of $(document).ready .

Error thrown:

Uncaught TypeError: Cannot read property 'prop' of undefined

Any solution(s)?

Answer 1

It looks like this line caused the problem:

setTimeout(stateToggle, 1);

because there is no parameters passed in the context. You can change it as following:

setTimeout(function() {
    stateToggle($emailCheck, $emailToggle, $emailItems);
}, 1);