Append text into div element when click using jquery

Question

Using the below code I append some input elements into the #cls div. But when I try to type inside the input also new input add. I only need new input when I click "click" text. Can anyone help me. Thank you

$('#cls').click(function() {
    var add="<input type="text">"
    $(#cls).append(add);
});

<div id="cls">click</div>

Given the syntax errors in your code, I don't understand how it works currently at all. — Rory McCrossan
– Rory McCrossan, Commented Feb 12, 2016 at 9:57
do you want new input to append every time you click cls? — Vicky Gonsalves
– Vicky Gonsalves, Commented Feb 12, 2016 at 10:03

Arun P Johny · Accepted Answer · 2016-02-12 09:56:21Z

3

You need to see whether the click actually happened in the div

$('#cls').click(function(e) {
  if ($(e.target).is(this)) { //or !$(e.target).is('input')
    var add = '<input type="text">';
    $(this).append(add);
  }
});

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

answered Feb 12, 2016 at 9:56

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vicky Gonsalves Over a year ago

I don't know what OP is trying to achieve, but if you keep on clickinng click it appends new input.

jack blank Over a year ago

@Arun if($(e.target).is($(this))){ would also work. can you explain why chose this instead of $(this). I guess because if wrap in a jquery object it is more "expensive"?

Pekka · Accepted Answer · 2016-02-12 09:59:21Z

0

If you user .after() method instead of .append() the textbox would appear outside the #cls div and hence clicking the textbox wouldn't cause adding a new one.

Some code

$('#cls').click(function() {
  var add="<input type='text'>";
  $('#cls').after(add);
});

Try it out

answered Feb 12, 2016 at 9:59

Pekka

715 bronze badges

Comments

Vicky Gonsalves · Accepted Answer · 2016-02-12 10:05:35Z

0

Append your input to parent element:

var clicked= false;
$('#cls').click(function() {
  if(!clicked){
    var add="<input type='text'>";
    $(this).parent().append(add);
    clicked = true;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='cls'>click</div>

edited Feb 12, 2016 at 10:05

answered Feb 12, 2016 at 9:57

Vicky Gonsalves

11.8k3 gold badges39 silver badges58 bronze badges

Comments

kp singh · Accepted Answer · 2016-02-12 10:11:06Z

0

use jQuery's one method. it will register click handler only once.

$('#cls').one("click", function(e) {
    var add = '<input type="text">';
    $(this).append(add);
});

answered Feb 12, 2016 at 10:11

kp singh

1,4609 silver badges22 bronze badges

Collectives™ on Stack Overflow

Append text into div element when click using jquery

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related