如下代码中点击继续按钮生成新的标题和内容的时候,当点击radio之后,再点击之前第一个的添加按钮就会生成两个text和删除按钮,如果点击几次radio,那么点击添加按钮,就会生成几个text和删除按钮的。但我想要的是不管是在哪里,只要点击一次添加按钮,就只生成一个text和删除按钮。php代码
<table class="formTable">
<tbody>
<tr>
<th><input type="checkbox" name="title_idx[]" value="">{=_('标题')}</th>
<td colspan="3"><input type="text" name="title[]" value="" ></td>
</tr>
<tr>
<th>{=_('内容')}</th>
<td colspan="3">
<input type="radio" id="radio" name="select[]" value="radio"> radio button
<br> 
</td>
</tr>
</tbody>
</table>
<br>
<div class="edit">
<button class="btn" id="add">继续</button>
<button class="btn" id="del">删除</button>
</div>JS 代码
(function($){
$(document).ready(function(){
$('#radio').click(function(){$(this).parent().find('input[type="text"]').remove();
$(this).parent().find('button').remove();var tr_last = $('.formTable tbody tr td').eq(1);
if(tr_last.find('.btn_radio_opt').length < 1)
{
tr_last.append('<span style="display:block;margin-top:5px"><input type="text" name="radio[]" value=""><button name="radio_btn_add" class="btn_radio_opt">添加</button></span>');$('.btn_radio_opt').click(function(){
$(this).after('<div class="radioid"><span style="display:block;margin-top:5px"><input type="text" name="radio[]" value=""><button name="radio_btn_del" class="btn_radio_del_opt">删除</button></span></div> ');$('.btn_radio_del_opt').click(function(){
$(this).prev().remove();
$(this).remove();
});
});
}
});var i = 0;
$('#add').click(function(){
i++;if($('.formTable tbody tr').eq(1).find('input[type=radio]:checked').length!= 0)
{
var tr_last = $('.formTable tbody tr:last');
$(tr_last).after($('.formTable tbody tr').eq(1).clone()).after($('.formTable tbody tr').eq(0).clone());$('.formTable tbody tr').eq(1).find('input:radio').each(function(){
var oldname = $(this).attr("name").substr(0,8);
$(this).attr("name",oldname+i);
});$('.formTable tbody tr').eq(0).find('input[type=checkbox]').attr("checked",false);
$('.formTable tbody tr').eq(0).find(':input[type=text]').val("");
$(".formTable tbody tr:eq(1)").find(":text, .btn_radio_opt, .btn_radio_del_opt, .btn_chk_del_opt, .btn_checkbox_opt, :text[name='radio[]'], :text[name='checkbox[]']").remove();$('.btn_radio_opt').click(function(){
$(this).after('<div class="radioid"><span style="display:block;margin-top:5px"><input type="text" name="radio[]" value=""><button name="radio_btn_del" class="btn_radio_del_opt">删除</button></span></div> ');$('.btn_radio_del_opt').click(function(){
$(this).prev().remove();
$(this).remove();
});
});
}

解决方案 »

  1.   

    出错的关键代码在
    $('#add').click(function(){ 这里的$('.btn_radio_opt').click(function(){ $(this).after('<div class="radioid"><span style="display:block;margin-top:5px"><input type="text" name="radio[]" value=""><button name="radio_btn_del" class="btn_radio_del_opt">삭제</button></span></div>');

    $('.btn_radio_del_opt').click(function(){
    $(this).prev().remove();
    $(this).remove();
    });
    }); 这段 上面的代码尽量写了都需要的部分
      

  2.   

    php代码
    <table class="formTable">
    <tbody>
      <tr>
    <th><input type="checkbox" name="title_idx[]" value="">{=_('标题')}</th>
    <td colspan="3"><input type="text" name="title[]" value="" ></td>
      </tr>
      <tr>
    <th>{=_('内容')}</th>
    <td colspan="3">
    <input type="radio" id="radio" name="select[]" value="radio"> radio button
    </td>
     </tr>
    </tbody>
    </table>
    <div class="edit">
    <button class="btn" id="add">继续</button>
    <button class="btn" id="del">删除</button>
    </div>JS 代码
    (function($){
        $(document).ready(function(){
    $('#radio').click(function(){ $(this).parent().find('input[type="text"]').remove();
    $(this).parent().find('button').remove(); var tr_last = $('.formTable tbody tr td').eq(1);
    if(tr_last.find('.btn_radio_opt').length < 1)
    {
        tr_last.append('<span style="display:block;margin-top:5px"><input type="text" name="radio[]" value="">
    <button name="radio_btn_add" class="btn_radio_opt">添加</button></span>');     $('.btn_radio_opt').click(function(){
    $(this).after('<div class="radioid"><span style="display:block;margin-top:5px"><input type="text" name="radio[]" value="">
          <button name="radio_btn_del" class="btn_radio_del_opt">删除</button></span></div> '); $('.btn_radio_del_opt').click(function(){
    $(this).prev().remove();
    $(this).remove();
    });
       });
    }
          }); var i = 0;
    $('#add').click(function(){
    i++; if($('.formTable tbody tr').eq(1).find('input[type=radio]:checked').length!= 0)
    {
    var tr_last = $('.formTable tbody tr:last');
    $(tr_last).after($('.formTable tbody tr').eq(1).clone()).after($('.formTable tbody tr').eq(0).clone()); $('.formTable tbody tr').eq(1).find('input:radio').each(function(){
    var oldname = $(this).attr("name").substr(0,8);
    $(this).attr("name",oldname+i);
    }); $('.formTable tbody tr').eq(0).find('input[type=checkbox]').attr("checked",false);
    $('.formTable tbody tr').eq(0).find(':input[type=text]').val("");
    $(".formTable tbody tr:eq(1)").find(":text, .btn_radio_opt, .btn_radio_del_opt, .btn_chk_del_opt, .btn_checkbox_opt, :text[name='radio[]'], :text[name='checkbox[]']").remove(); $('.btn_radio_opt').click(function(){
    $(this).after('<div class="radioid"><span style="display:block;margin-top:5px"><input type="text" name="radio[]" value="">
    <button name="radio_btn_del" class="btn_radio_del_opt">删除</button></span></div> '); $('.btn_radio_del_opt').click(function(){
    $(this).prev().remove();
    $(this).remove();
    });
    });
    }