追加新要素之后的功能无法正常工作 [英] Function doesn't work after appending new element

问题描述

我有一个jQuery函数创建一个新元素的点击操作出现了问题，这是行不通的。

I have a problem with the "click" action on a new element created by a jQuery function, it doesn't work.

我创建了一个的jsfiddle此链接（的jsfiddle ），但它并没有很好地工作，因为我不能调用的jsfiddle一个Ajax请求。

I created a JSFiddle to this link (JSFiddle), but it doesn't work perfectly because I can't call a Ajax request in JSFiddle.

我有这两个按钮，

<input type="button" onclick="invia('SIC-034031','', 's');" value="AGGIUNGI" style="height: 20px; width: 110px; background-color: #A5EFC5 ; color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: 12px; background-repeat: no-repeat; background-position: left center;" id="iscriviSIC-034031" class="pulsanteIscrizioni" name="xaggiorna"/>&nbsp;
<input type="button" onclick="invia('SIC-034031','R', 's');" value="RISERVA" style="height: 20px; width: 110px; background-color: #F00000; color: #FFFFFF; font-family: Arial,Helvetica,sans-serif; font-size: 12px; background-repeat: no-repeat; background-position: left center;" id="iscriviRSIC-034031" class="pulsanteIscrizioni" name="xaggiorna"/>

当你调用Ajax的功能，第一次，扣人回答这个输出：

When you call the ajax function for the first time, button one answers with this output:

OK;I;SIC-034031

按钮二是仅用于擦除。按钮一次造成的。

Button two is only used to erase. Button one creates.

<input id="iscriviSIC-034031" class="pulsanteIscrizioni" type="button" name="xaggiorna" style="height: 20px; width: 110px; background-color: #03F; color: #FFF; font-family: Arial,Helvetica,sans-serif; font-size: 12px;" value="TOGLI" onclick="invia('SIC-034031','');">

当我点击这个新的按钮，阿贾克斯函数返回此，

When I click this new button, the ajax function return this,

OK;C;SIC-034031;;

按钮一次消失和两个按钮回来。 现在有问题的所在，如果我点击第一个按钮，一切正常。如果我点击第二个按钮，这是行不通的。

Button one goes away and button two comes back. Now there is where the problem is, if I click on the first button, everything works. If I click in the second button, it doesn't work.

您可以试着帮我找到这个问题，好吗？

Can you try to help me to find the problem, please?

感谢;）

推荐答案

jQuery是只知道在它运行的时候在页面中的元素，加入到DOM使新元素的jQuery无法识别。为了打击这种使用事件委托，汩汩从新增项目事件到一个点，这是那里的DOM jQuery的时候跑在页面加载。许多人使用文件作为捕捉事件冒泡的地方，但它是没有必要去那么高的DOM树。理想的情况是你应该委托给存在于页面加载的时间最近的父。

jQuery is only aware of the elements in the page at the time that it runs, so new elements added to the DOM are unrecognized by jQuery. To combat that use event delegation, bubbling events from newly added items up to a point in the DOM that was there when jQuery ran on page load. Many people use document as the place to catch the bubbled event, but it isn't necessary to go that high up the DOM tree. Ideally you should delegate to the nearest parent that exists at the time of page load.

$(".pulsanteIscrizioni").on("click", function()

是你现在有什么。将其更改为 -

is what you have now. Change it to -

$(document).on("click", '.pulsanteIscrizioni',function()

这篇关于追加新要素之后的功能无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！