Dom object written in html loaded by Ajax

Question

I have introduce a part of the html by Ajax.

my html

<div class="article-feed">
    // html is loaded here.
</div>

ajax

var url = 'getpageplaceinfo/0';
$.ajax({
    type:'GET', 
    url: url, 
    dataType: 'html'
}).done(function(data){
    $('.article-feed').append(data); 
}

It load the html like this here

myname        
<input type="checkbox" name="place" value="1">

it load the checkbos correctly, but when I tried to get the move of checkbo , it doesn't work

$('input[name=place]').on('change', function(){
// not being called

Is it correct behaivor??

or How can I handle the dynamically loaded input??

Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — VLAZ, Oct 09 '19 at 13:35

score 2 · Accepted Answer · answered Oct 09 '19 at 13:27

2

This is because the event as you defined is bound when the code first runs and will not work on dynamic objects created after that time.

You can alternatively bind to dynamic controls using the following:

$('body').on('change', 'input[name=place]', function() {...

This will detect any object (dynamic or static) matching the selector input[name=place].

answered Oct 09 '19 at 13:27

Martin

16,093
1
29
48

1

Thanks it works perfectly for me.and your explanation is very helpful for understanding – whitebear Oct 09 '19 at 14:28

score 0 · Answer 2 · answered Oct 09 '19 at 13:28

0

You should attach your listener after the HTML has been appended.

    var url = 'getpageplaceinfo/0';
    $.ajax({
        type:'GET', 
        url: url, 
        dataType: 'html'
    }).done(function(data){
        $('.article-feed').append(data); 
        $('input[name=place]').on('change', function(){
            // handle change
        }
    }

answered Oct 09 '19 at 13:28

Jay Kariesch

1,392
7
13

Thanks your answer is also nice help. – whitebear Oct 09 '19 at 14:29

score -1 · Answer 3 · answered Oct 09 '19 at 13:29

-1

Have you tried using this?

$('input[name=place]').on('click', function(){})

answered Oct 09 '19 at 13:29

Olalekan

185
1
10

Thank you but it is the same as my post. – whitebear Oct 09 '19 at 14:28

Dom object written in html loaded by Ajax

3 Answers3