Reputation: 4480

Trying to get $(document).on('Click') to work for a p tag

I am trying to get my document.on function to work when the user clicks on the p tag that has a class called card. So far the function is non responsive. What should I change so the function will respond when I click on the p tag that has a class called card. Here is my HTML and JQuery code.

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="description" content="Contacts">
    <title>Contacts</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){

        $('button').click(function(){
            var first = $('input.first').val();
            var last = $('input.last').val();
            var desc = $('textarea').val();

            $('div.right').append("<p class='card'><h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4></p><p class='back'>"+desc+"</p>");

            return false; 
        });

        $(document).on('click', 'p.card', function(){ //this is the function I am trying to get to work.  
            alert("test");
        });
    });
    </script>
</head>
<body>
    <div class="wrapper">
        <div class="left">
            <form action="#">
                <p >First name: <input type="text" name="fname" class="first"></p>
                <p >Last name: <input type="text" name="lname" class="last"></p>
                <p class="desc">Description:</p> 
                <p><textarea rows="4" cols="50"></textarea></p>
                <button>Add User</button>
            </form>
        </div>
        <div class="right">
        </div>
    </div>
</body>

Here is my css code

*{  
/*  outline: 2px dotted red;*/
    border: 0 none;
    padding: 0;
    margin: 0;
}

div.wrapper{
    width: 970px;
    min-height: 100px;
    margin-left: auto;
    margin-right: auto;
}

div.left{
    border: 2px solid black;
    width: 500px;
    display: inline-block;
}

div.right{

    width: 200px;
    display: inline-block;
    height: 100px;
    vertical-align: top;
    padding-right: 100px;
    text-align: center;
}   


p{
    margin-left: 80px;
    margin-top: 20px;
    font-size: 20px;
    width: 400px;
}

p.email{
    margin-left: 45px;
}

button{
    margin: 30px;
    height: 20px;
    width: 100px;
    margin-left: 75px;
    text-align: center;
}

div.card{
    margin-left: 100px;
    margin-bottom: 20px;
    border: 2px solid black;
    width: 300px;
    height: 100px;
    text-align: center;
}

p.back{
    display: none;
    margin: 0px;
    padding: 0px;
    text-align: center;
}

textarea{
    border: 2px solid black;
}

Upvotes: 7

Answers (6)

dreamweiver

Reputation: 6002

looks like You're misusing the header tags.

I tried your DOM structure, and what's happening is that when Firefox/Chrome sees an invalid <h1> tag inside the <p>, it automatically closes the <p> tag. You can clearly see this in Developer Tools.

You should use <span> tags instead of header tags, check this it Works here

JS CODE:

 $('div.right')
 .append('<p class="card"><span>'+first+'<==>'+last+'</span>Click for Description!!!</p>');

Upvotes: 2

Damodar Bashyal

Reputation: 941

Wrap card with <div/> instead of <p/> and it should work. As you have other block elements inside <p/>. It's breaking your html.

$('div.right').append("<div class='card'><h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4><p class='back'>"+desc+"</p></div>");

And then change 'p.card' to 'div.card'.

Upvotes: 0

Piou

Reputation: 1066

Somehow the p.class you were appending was broken, it was below the other elements and was not being identified as the sender by jQuery event.

The following works fine:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Contacts">
        <title>Contacts</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){

            $('button').click(function(){
                var first = $('input.first').val();
                var last = $('input.last').val();
                var desc = $('textarea').val();
                var p = $('<p class="card">');
                p.append("<h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4><p class='back'>"+desc+"</p>");
                $('div.right').append(p);
                return false;
            });
          
            $(document).on('click', 'p.card', function(){ //this is the function I am trying to get to work.  
                alert("test");

            });
        });
        </script>
    </head>
<body>
    <div class="wrapper">
        <div class="left">
            <form action="#">
                <p >First name: <input type="text" name="fname" class="first"></p>
                <p >Last name: <input type="text" name="lname" class="last"></p>
                <p class="desc">Description:</p> 
                <p><textarea rows="4" cols="50"></textarea></p>
                <button>Add User</button>
            </form>
        </div>
        <div class="right">
        </div>
    </div>
</body>

Upvotes: 3

Jishnu V S

Reputation: 8409

your code were not right , the appending elements not formatted as your wish , thats why the click function not working, check the below snippt i have fixed your code, hope fully this will help you

$(document).ready(function(){

	$('button').click(function(){
		var first = $('input.first').val();
		var last = $('input.last').val();
		var desc = $('textarea').val();

		$('div.right').append('<p class="card"></p>');
			$('.card').html("<h1> first +' '+last</h1><h4>Click for description!'</h4><p class='back'>+desc+</p>"
		);
			
	});

	$(document).on('click', 'p.card', function(){ //this is the function I am trying to get to work.  
		alert("test");

	});
});

* {
	/*  outline: 2px dotted red;*/
	border: 0 none;
	padding: 0;
	margin: 0;
}
div.wrapper {
	width: 970px;
	min-height: 100px;
	margin-left: auto;
	margin-right: auto;
}
div.left {
	border: 2px solid black;
	width: 500px;
	display: inline-block;
}
div.right {
	width: 200px;
	display: inline-block;
	height: 100px;
	vertical-align: top;
	padding-right: 100px;
	text-align: center;
}
p {
	margin-left: 80px;
	margin-top: 20px;
	font-size: 20px;
	width: 400px;
}
p.email {
	margin-left: 45px;
}
button {
	margin: 30px;
	height: 20px;
	width: 100px;
	margin-left: 75px;
	text-align: center;
}
div.card {
	margin-left: 100px;
	margin-bottom: 20px;
	border: 2px solid black;
	width: 300px;
	height: 100px;
	text-align: center;
}
p.back {
	display: none;
	margin: 0px;
	padding: 0px;
	text-align: center;
}
textarea {
	border: 2px solid black;
}

<div class="wrapper">
  <div class="left">
    <form action="#">
      <p >First name:
        <input type="text" name="fname" class="first">
      </p>
      <p >Last name:
        <input type="text" name="lname" class="last">
      </p>
      <p class="desc">Description:</p>
      <p>
        <textarea rows="4" cols="50"></textarea>
      </p>
      <button>Add User</button>
    </form>
  </div>
  <div class="right"> </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Upvotes: 2

Jaromanda X

Reputation: 1

Using developer tools inpsection, you'll see your added html is

<p class="card"></p><h1> </h1><h4>'Click for description!'</h4><p></p><p class="back"></p>`

No matter what I've tried, I can't get Firefox to create insert that html as you want it!! it's like it doesn't want to put h1/h4 inside a p so decides to close the p early!

change to

$('div.right').append("<div class='card'><h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4></div><p class='back'>"+desc+"</p>");

and it all goes good - indeed, it's odd, that you already have css for div.card, but not p.card!!

Upvotes: 1

ca1c

Reputation: 1295

You could do it in Javascript and impliment jquery in the function:

var div = document.getElementById('someid');
function foo(e) {
    //Jquery Here
}
div.addEventListener('click', foo);

This is what I use for a lot of my functions.

Upvotes: 0

Trying to get $(document).on(&#39;Click&#39;) to work for a p tag

Answers (6)

Related Questions

Trying to get $(document).on('Click') to work for a p tag