Question

我正在尝试使用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 &nbsp;&nbsp;</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] 有没有其他方法可以克隆我的表单，每次用户想要添加新的播放器，而不使用整个代码？

Answer 1

你试过这样的尝试：

export const routes = [
{
    component: SectionFront,
    path: '/' ,
    exact: true,
    loadData: ( match ) =>{      
    return loadSectionFront( match.path )
    },
    },{
    component: SectionFront,
    path: '/investing' ,
    exact: false,
    loadData: ( match ) =>{
    return loadSectionFront( match.path )
    }
},
{
    component: SectionFront,
    path: '/news/companies' ,
    exact: false,
    loadData: ( match ) =>{
    return loadSectionFront( match.path )
    }
}]

ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter>
          <CoreLayout>
            {renderRoutes(routes)}
          </CoreLayout>
        </BrowserRouter>
     </Provider>,
    mountNode
  );

Answer 2

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();
});

Answer 3

我认为您只需使用.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 &nbsp;&nbsp;</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>

克隆PHP表单并附加到div

3 个答案: