Please help. I don't understand where is issue? This structure netstable menu.
<a href="" class="btn keyoptadd" onclick="return false">Add</a>
<a href="" class="btn keyoptdelete" onclick="return false">Del</a>
<div class="dd" id="nestable_list_1">
<ol class="dd-list">
<li class="dd-item dd3-item" data-id="2">
<div class="dd-handle dd3-handle" style="height:42px;"></div>
<div class="dd3-content" style="height:42px;">
<input type="text" name="key[2][key]" value="2" class="input-large">
<input type="text" name="key[2][expl]" class="input-large" value=" 1234">
<a href="" class="btn keyoptadd_in" onclick="return false">Add</a>
<a href="" class="btn keyoptdelete_in" onclick="return false">Del</a>
</div>
<ol>
<li class="dd-item dd3-item" data-id="3">
<div class="dd-handle dd3-handle" style="height:42px;"></div>
<div class="dd3-content" style="height:42px;">
<input type="text" name="key[3][key]" value="2 - 1" class="input-large">
<input type="text" name="key[3][expl]" class="input-large" value="555">
<a href="" class="btn keyoptadd_in" onclick="return false">Add</a>
<a href="" class="btn keyoptdelete_in" onclick="return false">Del</a>
</div>
<ol>
<li class="dd-item dd3-item" data-id="4">
<div class="dd-handle dd3-handle" style="height:42px;"></div>
<div class="dd3-content" style="height:42px;">
<input type="text" name="key[4][key]" value="2 - 1 - 1" class="input-large">
<input type="text" name="key[4][expl]" class="input-large" value="444">
<a href="" class="btn keyoptadd_in" onclick="return false">Add</a>
<a href="" class="btn keyoptdelete_in" onclick="return false">Del</a>
</div>
</li>
</ol>
</li>
</ol>
</li>
</ol>
<textarea id="nestable_list_1_output" style="display:none;" name="phonetype" class="m-wrap span12"></textarea>
</div>
</div>
how to make menu and sub menu. and jquery codes:
$(function(){
var countedkey = $('.dd-list li').length;
$('.keyoptadd').click(function(e){
countedkey++;
$('.dd-list').append('<li class="dd-item dd3-item" data-id="'+countedkey+'"><div class="dd-handle dd3-handle" style="height:42px;"></div><div class="dd3-content" style="height:42px;"><input type="text" name="key['+countedkey+'][key]" class="input-large"> <input type="text" name="key['+countedkey+'][expl]" class="input-large"><a href="" class="btn keyoptadd" onclick="return false">Ek</a><a href="" class="btn keyoptdelete" onclick="return false">Sil</a></div></li>');
jQuery('.afx').trigger('click',function(e){});
return false
});
$('.keyoptdelete').click(function(){
countedkey--;
$('.dd-list li:last').remove();
jQuery('.afx').trigger('click',function(e){});
return false
});
$('.keyoptadd_in').click(function(e){
countedkey++;
$('.dd3-content').append('<ol><li class="dd-item dd3-item" data-id="'+countedkey+'"><div class="dd-handle dd3-handle" style="height:42px;"></div><div class="dd3-content" style="height:42px;"><input type="text" name="key['+countedkey+'][key]" class="input-large"> <input type="text" name="key['+countedkey+'][expl]" class="input-large"><a href="" class="btn keyoptadd_in" onclick="return false">Ek</a><a href="" class="btn keyoptdelete_in" onclick="return false">Sil</a></div></ol></li>');
jQuery('.afx').trigger('click',function(e){});
return false
});
$('.keyoptdelete_in').click(function(){
countedkey--;
$(this).parent().remove();
jQuery('.afx').trigger('click',function(e){});
return false
});
App.init();
jQuery('.afx').click(function(e){
UINestable.init();
e.stopPropagation();
});
UINestable.init();
});
You are targeting the wrong element to append the new element to.
You can use jQuery closest to match the ol ancestor like:
$('<ol style="display:block"><li class="dd-item dd3-item" data-id="' + countedkey + '"><div class="dd-handle dd3-handle" style="height:42px;"></div><div class="dd3-content" style="height:42px;"><input type="text" name="key[' + countedkey + '][key]" class="input-large"> <input type="text" name="key[' + countedkey + '][expl]" class="input-large"><a href="" class="btn keyoptadd_in2" onclick="return false">Add</a><a href="" class="btn keyoptdelete_in" onclick="return false">Del</a></div></ol></li>').appendTo($(this).closest('ol'));