CODEWITHSUNDEEP
javascriptjquerycss
Neo
Neo

Reputation: 817

$(this).css() is producing Uncaught TypeError: Cannot read property 'defaultView' of undefined

I have a the below code where I would like to check id of an element, but when I put

$(this).attr("Id");

it returned "undefined". So I checked with 

.css("width");

and it returns: 

Uncaught TypeError: Cannot read property 'defaultView' of undefined.

Below is my code:

function create_login_dialog() {
  $(this).on("click", function() {
    element_id = $(this).css("width");
    if (element_id == "#login") {
      var login_dialog = "<form id='login_dialog' method='post' action=''></form>";
      $("body").append(login_dialog);
      console.log("logindialog is working");
    } else {
      console.log(element_id);
    }
  });


  console.log("loginquery.js is working");
}
<div id="login">the login div</div>

Upvotes: 0

Views: 3864

Answers (2)

Terry
Terry

Reputation: 66123

You're storing the width in the variable element_id, yet you are comparing it to #login one line down:

element_id = $(this).css("width");
if (element_id == "#login") {...}

I don't understand your logic. If you want to get the ID of the element that triggered the click event, listen to the event.target and get its ID attribute. The event.target will be the element that have triggered the click event that has bubbled up the DOM:

function create_login_dialog() {

  $(document).on("click", function(e) {

    // Get the ID of the element (e.target) that triggered the click event
    var element_id = e.target.id;

    // Check if the element that triggered the click event has an id of "login" (no hash!)
    if (element_id === "login") {
      var login_dialog = "<form id='login_dialog' method='post' action=''></form>";
      $("body").append(login_dialog);
      console.log("logindialog is working");
    } else {
      console.log(element_id);
    }
  });

  console.log("loginquery.js is working");
}

Note / disclaimer

This solution is, however, just a patchy workaround for your logic. Based on intuition, I have a feeling that create_login_dialog() will be fired multiple times throughout the duration the user interacts with the page. This will mean that multiple click event handlers will be bound to the document. In fact, the entire event binding logic should simply be moved out of the method and into the DOM ready code block.

Alternatively, you should namespace the click event and unbind it using .off(), e.g.:

// Unbind any click event handlers attached by create_login_dialog
$(document).off("click.loginDialogCreated");

// Bind new click event handler
$(document).on("click.loginDialogCreated", function(e) {...}

Upvotes: 1

Shadow Fiend
Shadow Fiend

Reputation: 1829

Try this.

$("#login").on("click", function() {
  element_id = $(this).attr("id");
  if (element_id == "#login") {
    var login_dialog = "<form id='login_dialog' method='post' action=''></form>";
    $("body").append(login_dialog);
    console.log("logindialog is working");
  } else {
    console.log(element_id);
  }
});

console.log("loginquery.js is working");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="login">the login div</div>

Upvotes: 2

Related Questions