Unable to use any JQuery methods attached to “this”

311
February 03, 2017, at 10:24 AM

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 + "&nbsp" + 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:&nbsp;&nbsp;<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>
Answer 1

for jQuery use $(this) instead of this.

Answer 2

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());
READ ALSO
PanResponder snaps Animated.View back to original position on second drag

PanResponder snaps Animated.View back to original position on second drag

I have created a PanResponder to move a AnimatedView vertically

316
What is the purpose of `constant.js` in d3-drag library?

What is the purpose of `constant.js` in d3-drag library?

In having a bit of a look at the source code for the d3-drag javascript (es6) module, I've noticed there is a file called constantjs whose entire contents are:

315
Verify authentication - Parse Cloud

Verify authentication - Parse Cloud

I want only the authenticated users to modify classes in the databaseFor example:

406
Issue upgrading ember 2.8 to 2.11 - cannot find module &#39;ember&#39;

Issue upgrading ember 2.8 to 2.11 - cannot find module 'ember'

I believe this is somehow related to how Ember is now setup through npm instead of bower

398