Dopo aver fatto clic su aggiungi figlio con campo di input come albero

Question

Sto cercando di creare una struttura organizzativa con figlio sinistro e figlio destro. proprio come questo demo http://www.jqueryscript.net/demo/Create-An-Editable-Organization-Chart-with-jQuery-orgChart-Plugin/

Ma voglio salvare i dati da qui con il campo di input. Voglio creare figlio sinistro e figlio destro per ciascuno dopo il clic. ora tutti visualizzati uno dopo l'altro in basso e solo il pulsante di rimozione. Voglio anche aggiungere pulsante per creare child per ogni form di input. Qui ho usato come questo

$(function() { 
 
    var scntDiv = $('#p_scents'); 
 
    var i = $('#p_scents p').size() + 1; 
 

 
    $('#addScnt').live('click', function() { 
 
    $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i + '" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv); 
 
    i++; 
 
    return false; 
 
    }); 
 

 
    $('#remScnt').live('click', function() { 
 
    if (i > 2) { 
 
     $(this).parents('p').remove(); 
 
     i--; 
 
    } 
 
    return false; 
 
    }); 
 
});

* { 
 
    font-family: Arial; 
 
} 
 
h2 { 
 
    padding: 0 0 5px 5px; 
 
} 
 
h2 a { 
 
    color: #224f99; 
 
} 
 
a { 
 
    color: #999; 
 
    text-decoration: none; 
 
} 
 
a:hover { 
 
    color: #802727; 
 
} 
 
p { 
 
    padding: 0 0 5px 0; 
 
} 
 
input { 
 
    padding: 5px; 
 
    border: 1px solid #999; 
 
    border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    -web-kit-border-radius: 4px; 
 
    -khtml-border-radius: 4px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
 
<h2><a href="#" id="addScnt">Add Another Input Box</a></h2> 
 

 
<div id="p_scents"> 
 
    <p> 
 
    <label for="p_scnts"> 
 
     <input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /> 
 
    </label> 
 
    </p> 
 
</div>

Ecco jsfiddle DEMO voglio creare struttura ad albero stesso di quello plugin con modulo di input. ma non è riuscito a farlo. il mio frammento non funziona in modo tale che ho inserito il link jsfiddle.

Answer 1

Ci sono vari errori nel codice, principalmente gli ID devono essere unici. E usa on() invece di live() poiché è deprezzato nelle nuove versioni. Si può fare qualcosa di simile con l'utilizzo di tavolo, si tratta di un semplice demo è necessario aggiornarlo

// bind click event handler 
 
$("#main").on('click', '.add', function() { 
 
    //getting parent td 
 
    var $td = $(this).parent(); 
 
    // creating child element 
 
    var $td1 = $('<td>', { 
 
    html: '<input />  <button class="add">+</button>  <button class="remove">-</button>' 
 
    }); 
 
    // getting child table if there is 
 
    var $tbl = $td.children('table') 
 
    // checking child exist or not , if yes then append child to it 
 
    if ($tbl.length) 
 
    $tbl.find('tr').eq(0).append($td1); 
 
    // else create new table and update 
 
    else 
 
    $td.append($('<table>', { 
 
     html: $('<tr>', { 
 
     html: $td1 
 
     }) 
 
    })) 
 
    // bind remove handler 
 
}).on('click', '.remove', function() { 
 
    // remove the parent td 
 
    $(this).parent().remove(); 
 
});

input { 
 
    width: 20px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id="main" style="width:100%;text-align:center"> 
 
    <tr> 
 
    <td> 
 
     <input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /> 
 
     <button class="add"> 
 
     + 
 
     </button> 
 
     <button class="remove"> 
 
     - 
 
     </button> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

Gli elementi vengono aggiunti dinamicamente alla pagina, quindi gli eventi non sono associati agli elementi aggiunti.

Controllare questo codice. Funzionerà.

$(function() { 
 
     var scntDiv = $('#p_scents'); 
 
     var i = $('#p_scents p').size() + 1; 
 
     $('#addScnt').on('click', function() { 
 
       $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv); 
 
     i++; 
 
       return false; 
 
     }); 
 
    $(document).on("click", '#remScnt', function(e) { 
 
     if(i > 2) { 
 
         $(this).closest('p').remove(); 
 
         i--; 
 
       } 
 
       return false; 
 
    }); 
 
    }); 
 

* { font-family:Arial; } 
 
h2 { padding:0 0 5px 5px; } 
 
h2 a { color: #224f99; } 
 
a { color:#999; text-decoration: none; } 
 
a:hover { color:#802727; } 
 
p { padding:0 0 5px 0; } 
 

 
input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<h2><a href="#" id="addScnt">Add Another Input Box</a></h2> 
 

 
<div id="p_scents"> 
 
    <p> 
 
     <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label> 
 
    </p> 
 
</div>

Answer 3

Questo può fare il lavoro, ma ammetto c'è qualche bug, ma penso che sia ancora degno di guardare .. l'ho fatto con l'aiuto di Bootstrap sistema di griglia.

HTML

<div class="container-fluid"> 
    <div class="row"> 
    <div class="parent-col col-md-12"> 
     <input type="text" /> 
     <BR /> 
     <a class='sibling'>Add Sibling</a> 
     or 
     <a class='child'>Add Child</a> 
    </div> 
    </div> 
</div> 

JS

$('.child').click(function(){ 
    var r = $(this).closest('div.row').clone(true, true); 
    r.find('.parent-col').not(':eq(0)').remove(); 
    var c = $(this).closest('.parent-col'); 
    var n = c.append(r); 
}); 

$('.sibling').click(function(){ 

    var thisC = $(this).closest('.parent-col'); 
    var n = thisC.clone(true, true); 
    thisC.after(n); 
    var c = $(this).closest('div.row'); 
    var len = $('div.parent-col', c).length; 
    var newClass = Math.ceil(12/len); 
    c.find('.parent-col').attr('class', 'parent-col col-md-'+newClass); 

}); 

jsFiddle

test è in piena vista la larghezza notare facilmente la struttura ad albero.