[英]Clone PHP form and append to div
我正在尝试使用jQuery将长格式(从外部页面)附加到动态创建的Div。
到目前为止,我把它当作jQuery:
<script>
$('.add-player').click(function (e) {
e.preventDefault();
var id = $("#menuPlayers.nav-tabs li[role='presentation']").length+1; with role = presentation
var tabId = 'player_' + id;
$(this).closest('li').before('<li role="presentation"><a href="#player_' + id + '" style="padding-top: 4px; padding-bottom: 4px;">' + id + '</a></li>');
$('.tab-content').append('<div role="tabpanel" class="tab-pane" id="' + tabId + '">' + $("#cloneThisDiv").clone().appendTo("#" + tabId) + '</div>');
$('#menuPlayers.nav-tabs li:nth(' + id + ') a').click();
});
</script>
而作为HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<legend>
<ul class="nav nav-tabs" role="tablist" id="menuPlayers">
<li>Insert Players </li>
<li role="presentation" class="active"><a href="#player_1" aria-controls="player_1" role="tab" data-toggle="tab">1</a></li>
<li role="presentation"><a href="#player_2" aria-controls="player_2" role="tab" data-toggle="tab">2</a></li>
<li role="presentation" ><a href="#player_3" aria-controls="player_3" role="tab" data-toggle="tab>3</a></li>
<li><a href="#" class="add-player"> <b> + </b> </a></li>
</ul>
</legend>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="player_1">
... PHP LONG FORM that i want to clone to the new div created with jQuery...
</div>
<div role="tabpanel" class="tab-pane" id="player_2">
Tab2
</div>
<div role="tabpanel" class="tab-pane" id="player_3">
Tab 3
</div>
</div>
但是我无法达到我想要的...使用此行$("#cloneThisDiv").clone().appendTo("#" + tabId)
,在创建新标签时它返回[object Object] 。
每当用户想要添加新播放器而无需使用整个代码时,还有另一种方法可以克隆表单吗?
你有没有这样尝试过:
var form = $("#cloneThisDiv").clone();
$("#"+tabId).append(form);
appendTo
方法返回一个domNode
因此您不能将其用作append
方法中的字符串。
试试这个代码:
<script>
$('.add-player').click(function (e) {
e.preventDefault();
var id = $("#menuPlayers.nav-tabs li[role='presentation']").length+1; with role = presentation
var tabId = 'player_' + id;
$(this).closest('li').before('<li role="presentation"><a href="#player_' + id + '" style="padding-top: 4px; padding-bottom: 4px;">' + id + '</a></li>');
var newPlayerTab = $('.tab-content').append('<div role="tabpanel" class="tab-pane" id="' + tabId + '"></div>');
$("#cloneThisDiv").clone().appendTo($(newPlayerTab));
$('#menuPlayers.nav-tabs li:nth(' + id + ') a').click();
});
我认为您只需要使用.html()
而不是.clone().appendTo(
$('.add-player').click(function (e) { e.preventDefault(); var id = $("#menuPlayers.nav-tabs li[role='presentation']").length+1; //with role = presentation var tabId = 'player_' + id; $(this).closest('li').before('<li role="presentation"><a href="#player_' + id + '" style="padding-top: 4px; padding-bottom: 4px;">' + id + '</a></li>'); $('.tab-content').append('<div role="tabpanel" class="tab-pane" id="' + tabId + '">' + $("#player_1").html() + '</div>'); $('#'+tabId).find('.form').find('h3').text(tabId); $('#menuPlayers.nav-tabs li:eq(' + id + ') a').click(); }); $('#menuPlayers').on('click' , 'li a:not(.add-player)',function(){ $('.tab-pane').hide(); $($(this).attr('href')).show(); }).find('a[href="#player_1"]').click();
.form{ background : #005eff; padding : 10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <legend> <ul class="nav nav-tabs" role="tablist" id="menuPlayers"> <li>Insert Players </li> <li role="presentation" class="active"><a href="#player_1" aria-controls="player_1" role="tab" data-toggle="tab">1</a></li> <li role="presentation"><a href="#player_2" aria-controls="player_2" role="tab" data-toggle="tab">2</a></li> <li role="presentation" ><a href="#player_3" aria-controls="player_3" role="tab" data-toggle="tab">3</a></li> <li><a href="#" class="add-player"> <b> + </b> </a></li> </ul> </legend> <div class="tab-content"> <div role="tabpanel" class="tab-pane" id="player_1"> <form class="form"> <h3>Player_1</h3> <input type="text" /><br/> <input type="text" /><br/> <textarea></textarea> </form> </div> <div role="tabpanel" class="tab-pane" id="player_2"> Tab2 </div> <div role="tabpanel" class="tab-pane" id="player_3"> Tab 3 </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.