Unable to use any JQuery methods attached to “this”
When I console log "this", it show's the correct container and the correct HTML tree. When I try this.method(), it says this cannot be referenced in this context.
My goal is to to be able to target children of "this" where "this" is a div container. The problem I'm having is that the browser is refusing to recognize that it has children, even though it can do so when referenced without .children, or any of the jquery methods attached to it (this.val() or this.parent(), or etc.)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<script type = "text/javascript">
$(document).ready(function(id) {
var contactCardNo = 0;
var newVar = "";
$(document).on('click', ".contact", function() {
alert(this);
console.log(this);
console.log($(this.children()));
/*if ($(newVar ).is(":hidden")) {
$(".contactDescription").hide();
$(newVar).show();
} else {
$(".contactDescription").show();
$(newVar).hide();
}*/
});
function attach_handler() {
//$(newVar).click(function() {
// alert(this);
//});
//alert(newVar);
var newVar = "\"" + newVar + "\"";
alert(newVar);
};
$(document).on('click', '#submitButton', function() {
var firstName = $("#firstName").val();
var lastName = $("#lastName").val();
var description = $("#description").val();
var idToAttach = "#contact" + contactCardNo++;
$("#contacts").append("<div class = 'contact'><p>" + firstName + " " + lastName + "</p><p class = 'contactDescription'>Click for a description!</p><p class = 'description'>" + description + "</p></div>");
$(idToAttach).css('width', '300px');
$(idToAttach).css('height', '150px');
$(idToAttach).css('display', 'block');
newVar = idToAttach;
attach_handler();
$(idToAttach).hide();
return false;
});
});
</script>
<style type = "text/css">
*{
padding:0px;
margin:0px;
}
#container{
width:800px;
height:800px;
display:inline-block;
}
#contactForm {
width:400px;
height:400px;
display:inline-block;
vertical-align:top;
}
#contacts {
width:390px;
height:800px;
display:inline-block;
}
.contact {
width:300px;
height:150px;
display:block;
}
.description {
width: 280px;
height: 100px;
}
div{
border:1px solid #000;
}
</style>
</head>
<body>
<div id = "container">
<span>
<div id = "contactForm">
<form>
<p>First Name: <input type = "text" name = "firstName" id = "firstName" /></p>
<p>Last Name: <input type = "text" name = "lastName" id = "lastName" /></p>
<p>Description:</p>
<p><input type = "textarea" id = "description" /></p>
<p><input type = "button" value = "Add Contact" id = "submitButton" /></p>
</div>
<div id = "contacts">
</div>
</span>
</div>
</body>
</html>
for jQuery use $(this) instead of this.
Parenthesis can be tricky sometimes. You need to pass this to jQuery before running the children() method.
Change this:
console.log($(this.children()));
To this:
console.log($(this).children());
-
05:40
How we can insert header and footer in google docs with google docs api using PHP code
-
00:20
-
10:50
Writing a new and appending a file in PHP without erasing contents
-
09:00
How to combine 2 arrays with the condition that 2 and 5 values will be from the second array?
-
8:30
-
6:50
How to keep the ?error on url if page extension not included?
-
5:00
-
3:10
-
1:20
Cannot find the answer after my research, help me with mysql [duplicate]
- search for elements in a list 110394 visits
- typescript: tsc is not recognized as an internal or external command, operable program or batch file 104576 visits
- In Chrome 55, prevent showing Download button for HTML 5 video 98047 visits
- RxJS5 - error - TypeError: You provided an invalid object where a stream was expected 95510 visits
- Ionic 2 - how to make ion-button with icon and text on two lines? 91769 visits
- NetBeans IDE - ClassNotFoundException: net.ucanaccess.jdbc.UcanaccessDriver 61196 visits
- Adding methods to es6 child class 21940 visits
