Jquery 如何将事件定位在变量选择器上？

当下拉框设置为“单选按钮”且添加了另一个问题时，所有应将输入元素附加到其各自的.q\udiv的.addrad按钮仅将元素附加到最后一个.q\udiv（如本节第25行所确认）。每个add按钮应仅将克隆的输入元素附加到这些按钮所属的div。我是否应该为.addrad上的单击事件向选择器添加变量？如果我不需要变量，这个选择器应该是什么样子？如果您能提供任何关于如何开展这项工作的信息和见解，我将不胜感激

JQuery（在JSFIDLE上找到项目的其余部分）：

$（文档）.ready（函数（）{
var clonedForm=$（'form'）.clone（）；
var计数器=1；
var=1；
var clone=$（'mp#u 0 div[name^=“answer”]”）；
var clone1=$（'#checkbox_0 div'）.children（）.clone（）；
var clone2=$（'#radio_0 div'）.children（）.clone（）；
var clone3=$（'#选择0 div'）.children（）.clone（）；
var newqid=$（“#内容形式”）.length；
$（'.removecb'）.hide（）；
$（'.removeq'）.hide（）；
$（'.removerad'）.hide（）；
$（'.removechoose'）.hide（）；
$（文档）。在（“单击”上，“.addrad”，函数（e）{
var idx=$（this）.sibbines（'div[id^=“radio_“]div'）.find（'.radio:last'）.length；
var newRad=$（clone2.clone（）；
计数器++；
$（'div[id^=“radio”]div-input[type=“text”]：last'）.attr（'name'，'radio'+计数器）；
$（'.removerad'）.show（）；
$（'[id^=“radio_”]：last div'）。追加（newRad）；
e、 预防默认值（）；
});
$（文档）。在（“单击”上，“.removead”，函数（e）{
如果（计数器！=1）{
$（'input[type=“radio”]：last'）。删除（）；
$（'input[name^=“radio_”]：last'）。删除（）；
计数器--；
}
如果（计数器==1）{
$（'.removerad'）.hide（）；
}
如果（计数器<1）{
计数器=1；
}
e、 预防默认值（）；
});
$（文档）。在（“单击”、“.nextq”上，函数（）{
var newForm=$（clonedForm.clone（）；
计数器=1；
计数器1++；
$（'.done、.nextq、.removeAnswer、.removeq'）.hide（）；
$（“#内容”）。追加（“
”）；
$（“#内容”）.append（newForm）；
$（'[class^=“q_']：last b.qnum'）.empty（）.append（counter1+'））
$（newForm）.children（“.group”）.hide（）；
$（newForm）.children（#text”）.show（）；
$（'form:last'）.find（'.select_0'）.attr（'class'，'select_'+newqid）；
$（'class^=“q_']：last'）.attr（'class'，'q_'+newqid）；
$（'form:last'）.find（'mp_0'）.attr（'id'，'mp_'+newqid）；
$（'form:last'）.find（'#checkbox_0'）.attr（'id'，'checkbox_'+newqid）；
$（'form:last'）.find（'.done:last、.nextq:last、.removeq:last'）.show（）；
返回false；
});
$（文档）。在“单击”、“删除”上，函数（e）{
var newqid=$（'form:last[name^=“question”]：last'）。index（）-1；
计数器1--；
$（'hr:last'）.remove（）；
$（'form[name^=“question”]：last'）。删除（）
$（“[class^=“q”]：最后输入，[class^=“q”]：最后文本区，[class^=“q”]：最后选择，[class^=“q”]：最后按钮，[class^=“q”]：最后选项”）.prop（'disabled'，false）；
$（'form:last'）.find（'.done.nextq.removeq'）.show（）；
newqid-1；
$（'[type=“checkbox”]'）.prop（'disabled'，true）；
e、 预防默认值（）；
如果（计数器1==1）{
$（'.removeq'）.hide（）；
}
});
$（'.group'）.hide（）；
$（'#text'）.show（）；
$（文档）。在（“更改”、“选择”功能上（）{
计数器=1；
$（this.parent（）.parent（）.sides（'.group'）.hide（）；
$（this）.parent（）.parent（）.sides（“[id^=”+$（this）.val（）+”]：last[class^=“”+$（this.val（）+”））.fadeIn（）；
});
});

始终知道您的上下文在哪里。。。 这是一个由来已久的语境问题。当构建可以包含重复部分的复杂接口时，最好将这些部分视为完整的实体（可创建的js/dom对象，在内部表示和管理每个新部分），然后您就有一个中心“上下文”就是

这个
。这样，您只需要在需要时实例化这些对象，并将它们作为一个整体添加到页面中。你会发现它让生活变得更轻松

遗憾的是，在许多JavaScript项目中，您没有看到这一点。主要是因为事物是以思维的速度构建的，这是由于JS的高度可绘制性。您所看到的是您所拥有的，它是一些基于上下文的jQuery、一些基于全局的jQuery、一些基于id的选择器、一些全局变量和一些存储的dom对象的混合体。一个混合的上下文-这是一个难题，阅读，理解和扩展

推荐
我建议您修改您的方法，并设计一个对象来表示您希望创建的每个部分，即
RadioButtonSection
、
TextSection
、
MultipleEchoiceSection
等等。每个对象将负责以本地方式创建、管理和删除自己的子部分。所谓局部，我的意思是依赖于
类
选择器、
$（this）
、或存储在
this
上的DOM元素，而不是使用
id
s、全局jQuery选择器、全局变量或特定的DOM结构

var RadioButtonSection = {
  create: function(){
    var obj = Object.create(this);
    obj.element = $('<div class="radio-button-section" />');
    return obj;
  },
  addRadio: function(){
    this.element.find('.radio-list').append('<input type="radio" />');
    /// ... and so on
    return this;
  },
  removeRadio: function(){
    /// ... and so on
    return this;
  },
  addToPage: function( target ){
    $(target).append( this.element );
    return this;
  },
  removeFromPage: function(){
    this.element.remove();
    return this;
  }
};

然后可以使用此对象管理新区域。此对象添加到页面的任何GUI元素都应该在本地工作，因此您不必担心创建或销毁了多少

如果您更喜欢
原型
方法，您可以使用此模型：

var RadioButtonSection = function(){
  if ( this instanceof RadioButtonSection ) {
    this.element = $('<div class="radio-button-section" />');
  }
  else {
    return new RadioButtonSection();
  }
};

RadioButtonSection.prototype.addRadio = function(){
  this.element.find('.radio-list').append('<input type="radio" />');
  /// ... and so on
  return this;
};

RadioButtonSection.prototype.removeRadio = function(){
  /// ... and so on
  return this;
};

RadioButtonSection.prototype.addToPage = function( target ){
  $(target).append( this.element );
  return this;
};

RadioButtonSection.prototype.removeFromPage = function(){
  this.element.remove();
  return this;
};

更快的选择
如果上述操作失败——因为这将意味着大量的返工——您至少应该设计您的函数和事件监听器，以尊重当前的-jQuery托管-DOM上下文，即
$（this）
，并从中得出结论。这样你就不会碰到问题了哟
var rbs = RadioButtonSection.create();
rbs.addToPage( /* target-element-or-selector-here */ );

var RadioButtonSection = function(){
  if ( this instanceof RadioButtonSection ) {
    this.element = $('<div class="radio-button-section" />');
  }
  else {
    return new RadioButtonSection();
  }
};

RadioButtonSection.prototype.addRadio = function(){
  this.element.find('.radio-list').append('<input type="radio" />');
  /// ... and so on
  return this;
};

RadioButtonSection.prototype.removeRadio = function(){
  /// ... and so on
  return this;
};

RadioButtonSection.prototype.addToPage = function( target ){
  $(target).append( this.element );
  return this;
};

RadioButtonSection.prototype.removeFromPage = function(){
  this.element.remove();
  return this;
};

var rbs = new RadioButtonSection()
  .addToPage( /* target-element-or-selector-here */ )
;

$(document).on("click", ".addrad", function(e) {
    counter++;
    e.preventDefault();
    var context = $(this);
    var group = context.closest('.group');
    var insert = group.find('div:first');
    var newRad = $(clone2).clone();
    newRad.find('input[type="text"]:last').attr('name', 'radio_'+counter);
    group.find('.removerad').show();
    insert.append(newRad);
});

var clone2 = $('#radio_0 div').children().clone();

newRad.filter('input[type="text"]:last').attr('name', 'radio_'+counter);

var clone2 = $('#radio_0 div').clone();

group.closest('[type="radio"]:last').remove()

insert.after(newRad);

e.preventDefault();
var context = $(this);
var group = context.closest('.group');
var items = group.find('div'); // it might be best to give these DIVs a class
var insert = items.filter(':last');
var newRad = $(clone2).clone();
group.find('.removerad').show();
insert.after(newRad);
newRad.find('input[type="text"]:last').attr('name', 'radio_' + items.length);

<div id="radio_0" class="group">
  <div class="radio-items">
    <input disabled="disabled" type="radio" />
    <input class="radio" name="radio_0" type="text" />
  </div>
  <button type="button" class="addrad">Toevoegen</button>
  <button type="button" class="removerad">Verwijderen</button>
</div>

group.find('.radio-items').length