Shulou(Shulou.com)06/03 Report--

This article mainly introduces the js can not capture dom by ajax dynamically loaded html elements how to do, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian with you to understand.

The jquery library is used

The specific html will not be shown here, but will probably be introduced as an example.

Contents of html file:

Delete

$(function () {)

$('# tid a.del') .click (function () {

Alert ('fk'); / / pop-up prompt

$('# tid'). Html ('New Delete'); / / instead of using ajax here, you can dynamically modify the html under div#tid.

Return false

});

});

Save and execute the above code, you will find that after clicking Delete, the Div content is indeed updated, but when you click New Delete, there is no pop-up fk prompt, indicating that after updating the original dom, the newly added html is not controlled by the js of the original page.

For a rookie like me, it is a very thorny problem. The most painful thing is that you have to solve it, as for the use involved, there is no nonsense.

The preliminary idea is to write the js static method directly into the dynamically loaded html. It seems that the page source code will be very messy and inconvenient to maintain, so there is no attempt, and the modified sample code cannot be provided here.

Idea two, doesn't jQuery integrate related methods? So Cai Di had to ask Google Duniang for help and searched wantonly (ps: this search term is really hard to describe), and many of the contents were different. Finally, he found a trace of jQuery.live () on stackflow, and it was feasible to test it. The revised js is as follows:

$(function () {)

$('# tid a.del'). Live ('click',function () {

Alert ('fk'); / / pop-up prompt

$('# tid'). Html ('New Delete'); / / instead of using ajax here, you can dynamically modify the html under div#tid.

Return false

});

});

As for the context of this, we will not mislead you. If you need it, you can refer to the relevant manual of jQuery.

(ps: colleague's UI uses jquery1.7.2 version.) incidentally, I tested the new version of jQuery v1.10.2, and firebug reported an error directly. Live (. Is not a function, it seems that the new version of jquery refactored the relevant methods, and then search

It is found that the live method has been removed since jquery 1.9, but we can replace it with the on method. It is important to note that the two methods are different and need to be changed slightly. The rewritten js is as follows:

$(function () {)

$('# tid'). On ('click','a.del',function () {

Alert ('fk'); / / pop-up prompt

$('# tid'). Html ('New Delete'); / / instead of using ajax here, you can dynamically modify the html under div#tid.

Return false

});

});

Here are some official instructions from jquery (http://jquery.com/upgrade-guide/1.9/#live-removed)

("a.foo") .live ("click", fn), for example, you can write$_ (document) .on ("click", "a.foo", fn)

Thank you for reading this article carefully. I hope the article "what if js cannot capture the html elements dynamically loaded by ajax in dom" will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.