CODEWITHSUNDEEP
javascriptajax
whitebear
whitebear

Reputation: 12423

Dom object written in html loaded by Ajax

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??

Upvotes: 0

Views: 42

Answers (3)

Olalekan
Olalekan

Reputation: 195

Have you tried using this?

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

Upvotes: -1

Jay Kariesch
Jay Kariesch

Reputation: 1482

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
        }
    }

Upvotes: 0

Martin
Martin

Reputation: 16423

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].

Upvotes: 2

Related Questions