jquery click event recursion
jquery click event recursion
我正在尝试添加一个新行并在选择之前的行时绑定单击事件。问题在于,这创建了一个递归逻辑,因为单击函数本身是绑定的。因此,目前第一次更新适用于单击绑定,但不适用于以下新行。这是代码
$('.new').click(function ()
{
var newrow =" <div class='controls controls-row'><div id='div_id_"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"' class='control-group control span1 m-wrap input-icon' >"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"</div><div id='div_rules_"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"' class='control-group control span5 m-wrap input-icon' ><input type='text' onchange='updateRecord(this)' id='rules_"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"' name='rules_"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"' class='m-wrap span11 new' value=''/></div></div>";
var Parent = document.getElementById('tablediv');
var NewDiv = document.createElement("DIV");
NewDiv.innerHTML = newrow;
Parent.appendChild(NewDiv);
$('.new').click(function ()
{
var newrow =" <div class='controls controls-row'><div id='div_id_"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"' class='control-group control span1 m-wrap input-icon' >"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"</div><div id='div_rules_"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"' class='control-group control span5 m-wrap input-icon' ><input type='text' onchange='updateRecord(this)' id='rules_"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"' name='rules_"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"' class='m-wrap span11 new' value=''/></div></div>";
var Parent = document.getElementById('tablediv');
var NewDiv = document.createElement("DIV");
NewDiv.innerHTML = newrow;
Parent.appendChild(NewDiv);
});
});
如何创建它,以便单击事件创建一个新行并将相同的函数单击事件添加到新行。谢谢
对于 jquery>=1.7,您可以使用 on() 的事件委托,对于早期版本,您可以使用 live() 进行事件委托。
$(document).on('click', '.new', function (){
var newrow =" <div class='controls controls-row'><div id='div_id_"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"' class='control-group control span1 m-wrap input-icon' >"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"</div><div id='div_rules_"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"' class='control-group control span5 m-wrap input-icon' ><input type='text' onchange='updateRecord(this)' id='rules_"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"' name='rules_"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"' class='m-wrap span11 new' value=''/></div></div>";
var Parent = document.getElementById('tablediv');
var NewDiv = document.createElement("DIV");
NewDiv.innerHTML = newrow;
Parent.appendChild(NewDiv);
});
而不是document
将事件绑定到在任何给定时间点存在于 DOM 中的另一个父容器。这利用了事件冒泡,实际上您将事件绑定到父元素或文档头,就像在我的示例中,当您单击元素时,它与选择器及其父元素匹配,因为事件冒泡到事件绑定到的位置并触发该元素上的事件
通过您使用通用选择器在内部绑定事件的方式.new
每次单击时,它都会将 click 事件再次绑定到现有的 .new 元素上,因此您最终会多次执行事件。
您也可以按以下方式执行此操作:
$(function(){
$('.new').click(handleClick);
});
function handleClick(){
var newrow =" <div class='controls controls-row'><div id='div_id_"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"' class='control-group control span1 m-wrap input-icon' >"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"</div><div id='div_rules_"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"' class='control-group control span5 m-wrap input-icon' ><input type='text' onchange='updateRecord(this)' id='rules_"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"' name='rules_"+this.id.split('_')[1]+'_'+new String(parseInt(this.id.split('_')[2])+1)+"' class='m-wrap span11 new' value=''/></div></div>";
var Parent = document.getElementById('tablediv');
var NewDiv = document.createElement("DIV");
NewDiv.innerHTML = newrow;
$(Parent).append($(NewDiv).find('.new').click(handleClick).end());
}
此外,还可以考虑使用模板来绑定数据和克隆元素,而不是使用字符串串联并在单击事件中动态创建 html。
改用 .on()。它会自动绑定到新创建的元素,因此您不需要递归。
相关文章:
- issue with FB.Event.subscribe
- Angularjs :$routeChangeStart event
- Javascript Recursion?
- event.prventDefault()持续多久
- <text区域>在我的html中包含event.keycode==13之后,wrap就不起作用了
- KeyDown event for CKeditor
- Javascript events: window.event vs argument reference (funct
- 动态填充Bootstrap选择选择器:change event dos'不起作用
- <td> focusin event .addclass
- event.preventDefault阻止ajax调用
- google.maps.event.addDomListener(window, 'load', fun
- jQuery event.target is_a_child_of(element)
- event.stopPropagation()在firefox javascript中不起作用
- asp.net text onkeyup event
- 如何从ondragend获取正确的event.pageX
- 面料:“;鼠标:向下”;在event.target中未返回对象
- 使用event.target.classlist区分按钮颜色
- event.keycode vs event.which
- 将字符串作为参数传递给函数onclick event jquery
- jquery click event recursion