从追加项目的jQuery是不可能的动作（） [英] jQuery impossible action on items from append ()
问题描述
我尽量让来自追加（元素上一些动作），但它是不可能的：
我的HTML：
＆LT;表ID =PA＆GT;
＆LT;＆TBODY GT;
＆所述; TR＆GT;
＆LT; TD＆GT;＆LT;输入类型=文本级=参数/＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;输入类型=按钮级=少值= - /＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;输入类型=文本级=注意禁用=禁用值=0/＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;输入类型=按钮类=多值=+/＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
[...]
＆LT; / TR＆GT;
＆LT; / TBODY＆GT;
＆LT; TFOOT类=隐藏-IF-无分页＆GT;
＆所述; TR＆GT;
＆LT; TD合并单元格=6＆GT;
＆LT;输入类型=按钮ID =btnAddVALUE =添加/＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; / TFOOT＆GT;
＆LT; /表＆gt;
和我的JS code：
//添加一行
函数Add（）{
$（＃PA TBODY）。追加（
＆所述; TR＆gt;中+
＆LT; TD＆GT;＆LT;输入类型=文本类='参数'/＆GT;＆LT; / TD＆gt;中+
＆LT; TD＆GT;＆LT;输入类型=按钮类='少'值=' - '/＆GT;＆LT; / TD＆gt;中+
＆LT; TD＆GT;＆LT;输入类型=文本类='注意'禁用=禁用值=0/＆GT;＆LT; / TD＆gt;中+
＆LT; TD＆GT;＆LT;输入类型=按钮类='更多'的价值='+'/＆GT;＆LT; / TD＆gt;中+
＆LT; TD＆GT;＆LT;输入类型=按钮类='btnDelete'值='X'/＆gt;中+
＆所述; / TR＆gt;中）;
$（。btnDelete）绑定（点击，删除）;
};// Suppr行
函数删除（）{
VAR面值= $（本）.parent（）父（）。 // TR
par.remove（）;
};//积极作用
$（函数（）{
//添加，保存，编辑和删除功能code
$（。btnDelete）绑定（点击，删除）;
$（＃btnAdd）绑定（点击，添加）;
}）;//添加1纸条行的
$（'更多'）.mousedown（函数（）{
X = $（本）.closest（TR）找到（。注意）;
VAL = parseInt函数（x.val（））;
如果（VAL＆10 9）{x.val（VAL + 1）;}
}）;//删除1在音符的行
$（'.LESS'）.mousedown（函数（）{
X = $（本）.closest（TR）找到（。注意）;
VAL = parseInt函数（x.val（））;
如果（VAL→1）{x.val（VAL-1）;}
}）;这是可见的jsfiddle： http://jsfiddle.net/9MyRa/
在第一次你可以看到，我可以.LESS或更多与CLIC增加。注意的价值，但只有在元素不来追加形式（）。从追加（）这最后一个元素，这两种功能简化版，工作： - （
感谢的
解决方案您需要使用事件代表团来支持动态地添加元素。
$（函数（）{
//添加，保存，编辑和删除功能code
$（。btnDelete）绑定（点击，删除）;
$（＃btnAdd）绑定（点击，添加）;
$（'＃PA TBODY'）上（点击，.btnDelete，删除）。
$（'＃PA TBODY'）。在（'点击'，'更多'，函数（）{
X = $（本）.closest（TR）找到（情况说明）。
VAL = parseInt函数（x.val（））;
如果（VAL＆10 9）{
x.val（VAL + 1）;
}
}）; $（'＃PA TBODY'）。在（'点击'，'.LESS'，函数（）{
X = $（本）.closest（TR）找到（情况说明）。
VAL = parseInt函数（x.val（））;
如果（VAL→1）{
x.val（VAL - 1）;
}
}）;
功能添加（）{
$（＃PA TBODY）。追加（
＆所述; TR＆gt;中+
＆LT; TD＆GT;＆LT;输入类型=文本类='参数'/＆GT;＆LT; / TD＆gt;中+
＆LT; TD＆GT;＆LT;输入类型=按钮类='少'值=' - '/＆GT;＆LT; / TD＆gt;中+
＆LT; TD＆GT;＆LT;输入类型=文本类='注意'禁用=禁用值=0/＆GT;＆LT; / TD＆gt;中+
＆LT; TD＆GT;＆LT;输入类型=按钮类='更多'的价值='+'/＆GT;＆LT; / TD＆gt;中+
＆LT; TD＆GT;＆LT;输入类型=按钮类='btnDelete'值='X'/＆gt;中+
＆所述; / TR＆gt;中）; };
函数删除（）{
VAR面值= $（本）.closest（'TR'）// TR
par.remove（）;
};
}）;演示：小提琴
当你使用一个正常事件注册模型，将直接登记处理的目标这是在处理程序注册执行点的DOM present。因此，将在稍后动态地添加元素不会得到那些处理程序。
解决这个问题的解决方案是使用事件委托，在这个模型的处理程序注册，这将是present当页面装有一个选择器，过滤掉源元素的祖先元素。这使得利用事件传播 - 事件的发生元素传播到所有祖先元素（有喜欢的焦点事件少数例外）。因此，一个事件中的元素发生被传播到祖先元素在他们的处理程序注册，则该事件源元素（event.target）和它的祖先之一作为第二个参数传递的选择匹配，如果是满足，则处理程序被执行。
I try to make some action on element from append() but it's impossible :
My html :
<table id="PA"> <tbody> <tr> <td><input type="text" class="argument" /></td> <td><input type="button" class="less" value="-"/></td> <td><input type="text" class="note" disabled="disabled" value="0"/></td> <td><input type="button" class="more" value="+"/></td> </tr> <tr> [...] </tr> </tbody> <tfoot class="hide-if-no-paging"> <tr> <td colspan="6"> <input type="button" id="btnAdd" value="Add"/> </td> </tr> </tfoot> </table>
And my JS code :
//Add a row
function Add(){ $("#PA tbody").append( "<tr>"+ "<td><input type='text' class='argument' /></td>"+ "<td><input type='button' class='less' value='-'/></td>"+ "<td><input type='text' class='note' disabled='disabled' value='0'/></td>"+ "<td><input type='button' class='more' value='+'/></td>"+ "<td><input type='button' class='btnDelete' value='X'/>"+ "</tr>"); $(".btnDelete").bind("click", Delete); };//Suppr a row
function Delete(){ var par = $(this).parent().parent(); //tr par.remove(); };//Active function
$(function(){ //Add, Save, Edit and Delete functions code $(".btnDelete").bind("click", Delete); $("#btnAdd").bind("click", Add); });//Add 1 at the note of the row
$( '.more' ).mousedown(function() { x=$(this).closest("tr").find( ".note" ); val = parseInt(x.val()); if(val<9){x.val(val+1);} });//Delete 1 at the note of the row
$( '.less' ).mousedown(function() { x=$(this).closest("tr").find( ".note" ); val = parseInt(x.val()); if(val>1){x.val(val-1);} });It's visible on Jsfiddle : http://jsfiddle.net/9MyRa/.
In first time you can see that i can add value of ".note" with clic on ".less" or on ".more" but only on element not come form append(). On this last element from append(), this both function does't work :-(
thank's
解决方案You need to use event delegation to support dynamically added elements.
$(function () { //Add, Save, Edit and Delete functions code $(".btnDelete").bind("click", Delete); $("#btnAdd").bind("click", Add); $('#PA tbody').on("click", '.btnDelete', Delete); $('#PA tbody').on('click', '.more', function () { x = $(this).closest("tr").find(".note"); val = parseInt(x.val()); if (val < 9) { x.val(val + 1); } }); $('#PA tbody').on('click', '.less', function () { x = $(this).closest("tr").find(".note"); val = parseInt(x.val()); if (val > 1) { x.val(val - 1); } }); function Add() { $("#PA tbody").append( "<tr>" + "<td><input type='text' class='argument' /></td>" + "<td><input type='button' class='less' value='-'/></td>" + "<td><input type='text' class='note' disabled='disabled' value='0'/></td>" + "<td><input type='button' class='more' value='+'/></td>" + "<td><input type='button' class='btnDelete' value='X'/>" + "</tr>"); }; function Delete() { var par = $(this).closest('tr') //tr par.remove(); }; });Demo: Fiddle
When you use a normal event registration model, it will register the handlers directly to the targeted which are present in the dom at the point of the handler registration execution. So elements which are added later dynamically will not get those handlers.
The solution to this is to use event delegation, in this model the handler is registered to a ancestor element which will be present when the page is loaded with the a selector to filter out the source element. This makes use of event propagation - events happening in an element is propagated to all the ancestor elements(there are few exceptions like focus event). So an event happening in an element gets propagated to the ancestor element in one of them the handler is registered then the events source element(event.target) and its ancestors is matched against the selector passed as the second parameter, if it is satisfied then the handler is executed.
这篇关于从追加项目的jQuery是不可能的动作（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
