javascript - How to bind a function to Element loaded via Ajax

Question

Welcome To Ask or Share your Answers For Others

javascript - How to bind a function to Element loaded via Ajax

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - How to bind a function to Element loaded via Ajax

I have a couple of Divs in my page with CSS class="hello" Further I use Ajax to fetch a few more Divs with a CSS class="hello" I have a piece of code which is called on Click event of the Divs as follows:

$('.hello').click(function(){
  alert("Hello Clicked");
})

It works fine with the Divs that are present in my page from start but does not work with Divs loaded using Ajax. Is there something I need do in order to bind this little piece of code with the newly loaded Divs too?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T18:23:35+0000

you should use .on to bind the handler to another element that is already present during the execution of the binding, like say the <body>, or the document and have it detect the children events. but ideally, you should bind it to the nearest common parent of the content loaded.

demo

//bind to the body a "click" handler for elements that have class names of "hello"
$('body').on('click','.hello',function(){
  alert("Hello Clicked");
})

Categories

javascript - How to bind a function to Element loaded via Ajax

javascript - How to bind a function to Element loaded via Ajax

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags