Append element ,getting append twice

Question

$('label[id="p-n-from"]').on('click',function() {
    var fromele = $('<div id="p-n-from-'+ifrom+'" class="input-control text"  data-role="input"><span class="mif-location prepend-icon"></span><input id="from['+ifrom+']" placeholder =" Enter Pick Up Location"  type="text" required></div>');
    $(fromDiv).append(fromele);
    return false;           
 });

<div class="col-md-6 ">
  <label class="input-control ">From</label>
  <div id="from-div">
    <div id="p-n-from-1" class="input-control text" data-role="input">
      <span class="mif-location prepend-icon"></span>
      <input id="from[0]" placeholder="Enter pickup " type="text" required>
    </div>
  </div>
  <div id="" class="col-md-6 ">
    <label id="p-n-from" class="input-control">
      <button class="button mini-button cycle-button mif-plus fg-green"></button>Add More</label>
  </div>
</div>
<div class="col-md-6 ">
  <div id="to-div">
    <label class="input-control ">To</label>
    <div id="p-n-to-1" class="input-control text" data-role="input">
      <span class="mif-location prepend-icon"></span>
      <input id="to[0]" placeholder="Enter drop location" type="text" required>
    </div>
  </div>

</div>

This is simple script is adding the input box twice, although the most of the form has dynamically added elements.

I can't figure out why this one is getting added twice. I have tried suggestions from this Appending a DOM element twice (jQuery)

But it didn't help. How can I resolve this issue?

I created this fiddle which worked fine....can you replicate the same issue in this fiddle ? http://jsfiddle.net/6a87ujyd/ — Rohit Arora, Dec 05 '15 at 06:27
Yes , that's why I didn't put jsfiddle here . The problem might have happened because a number of handles were there on the whole page . I tried unbind. That helped . — Neha, Dec 05 '15 at 06:36

score 0 · Answer 1 · answered Dec 05 '15 at 04:10

0

If you are using a div only add the inputs, try this:

1 - Add a div in your html

<div id='IdYourDiv'></div>

2 - Configure the script

var fromele = "<input type='text' id='input1'/><br><input type='text' id='input2'/>";
$('#IdYourDiv').html(fromele);

answered Dec 05 '15 at 04:10

Thiago Aleixo

61
6

This is really strange , I used your code .But anything I add to the "from-div" gets added twice . I am fixing with by different way . but I want to know whats wrong with the code . – Neha Dec 05 '15 at 06:17
I think very strange too. But a thing that I thought was in which moments do you call this function? Try call only the document.ready in moment for see the result. – Thiago Aleixo Dec 05 '15 at 19:31

score 0 · Answer 2 · answered Dec 05 '15 at 06:34

0

$('label[id="p-n-from"]).unbind();

putting it before the trigger helped .

answered Dec 05 '15 at 06:34

Neha

11
8

1

If this helps, check how you are binding event to it. Probably you are binding it more than once. – Rajesh Dec 05 '15 at 06:39
Tried that , it's bind just once. – Neha Dec 05 '15 at 15:19
There are only few options to check. Either there are more than one element, or event is getting bind more than once. Look for function that binds event to element, is it being called more than once. – Rajesh Dec 05 '15 at 15:29

Append element ,getting append twice

2 Answers2