Why doesn't a jQuery change function work after loading html with AJAX?

Question

I load a form and dynamically populate a select via AJAX from a PHP file. Before implementing the dynamic AJAX populated select, my change function works (it just shows another input when a user selects 'other'). Now the change function does not work.

I know the ready function is firing because the jStepper functions run. I have tried this with the change function in and outside the ready function. I have a feeling the change function loads before the AJAX get is finished, but does that really matter?

var types = "<select name='ve_categoryNo' id='ve_categoryNo'>";
var d = new Date();
$.get('scripts/vehicle_category_feed.php?date=' + d.getTime(), function ($type)
{
    $($type).find('type').each(function ()
    {
        types += "<option value='" + $(this).attr("categoryno") + "'>" + $(this).attr("category") + "</option>";
    });
    types += "<option value='other'>Other(Specify)</option></select>";
    $('#ve_categoryNo_td').html(types);
});
$(document).ready(function ()
{
    $('input[type=text]').click(function ()
    {
        $(this).select();
    });
    $('#vehicle_entry').ajaxForm(function ()
    {
        showMessage('vehicle_information_added');
    });
    $('#ve_ariNo').jStepper({minValue: 1, maxValue: 99999999});
    $('#ve_fleetNo').jStepper({minValue: 1, maxValue: 999999999});
    $('#ve_vehicleYear').jStepper();
    $('#ve_purchasePrice').jStepper({minValue: 0});
    $('#ve_categoryNo').change(function ()
    {
        if ((this.value) == "other")
        {
            $('#otherCategory').show();
            $('#otherCategory input[type=text]').focus();
        } else
        {
            $('#otherCategory').hide();
        }
    });
});

Possible duplicate of Event binding on dynamically created elements? — showdev
– showdev, Commented Jul 5, 2016 at 22:27

Mark Schultheiss · Accepted Answer · 2012-03-29 17:40:01Z

33

modify this:

$('#ve_categoryNo').change(function() {

to

$(document).on('change', '#ve_categoryNo', function() {

EDIT3: This would perform the best after an examination of your code more closely:

   $('#ve_categoryNo_td').on('change', '#ve_categoryNo', function() {

as it binds closest to the element in question.

You should also put the ajax call inside the ready script I would think.

The reason this is occuring is that there is nothing in the DOM to bind to when it is instantiated. Using the .on in this manner binds it to the document instead. If you had another "fixed" element that wraps it, it might be better to bind to that using that in place of "document" as it would likely perform better.

EDIT: Note that you COULD also add the change event management after you inject the element as part of the ajax call completion, but if you do this more than once, you should unbind it first in that case.

EDIT2: since there are questions/comments: FROM THE DOCUMENTATION: http://api.jquery.com/on/

Attaching many delegated event handlers near the top of the document tree can degrade performance. Each time the event occurs, jQuery must compare all selectors of all attached events of that type to every element in the path from the event target up to the top of the document. For best performance, attach delegated events at a document location as close as possible to the target elements. Avoid excessive use of document or document.body for delegated events on large documents.

edited Mar 29, 2012 at 17:40

answered Mar 29, 2012 at 16:37

Mark Schultheiss

34.3k13 gold badges75 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

ahhchuu Over a year ago

Yes! Brilliant, you fixed it. Could you perhaps explain why it works one way and not the other?

mikevoermans Over a year ago

Be careful how many items you bind to $(document) - its a better practice to bind to an element as close to the selector as you can (that isn't replaced by a DOM modification of course) Great answer though.

Mark Schultheiss Over a year ago

@mikevoermans - exactly why I added the note regarding the closer element and the option to add at injection point.

Mark Schultheiss Over a year ago

@Sinan .live binds differently and is slower as a result - it is recommended to use .on in the documentation

Mark Schultheiss Over a year ago

I added an example of closer binding of the .on for this specific example given the comments.

|

Walter Stabosz · Accepted Answer · 2012-03-29 16:43:02Z

2

I think the element you are binding to in the line:

$('#ve_categoryNo').change(function() { ...

does not yet exist in the DOM, so the event does not get bound.

Try using the .live function:

$('#ve_categoryNo').live('change', function() { ... });

Or make sure that your DOM elements exist before you try to bind events to them.

answered Mar 29, 2012 at 16:43

Walter Stabosz

7,7955 gold badges48 silver badges79 bronze badges

2 Comments

Mark Schultheiss Over a year ago

the .on( syntax is preferred over .live( and will perform better, especially if bound closer to the element in question.

Mark Schultheiss Over a year ago

see the latest example of my answer for binding closer as well as some notes on performance. live always binds to the document is my understanding.

Vinoth Smart · Accepted Answer · 2017-05-18 11:17:09Z

Worked from document ready to change works Ajax functionality

$(document).change(function(){
  $("#next").click(function() {
     var questionid = $('#question').val();         
     var assementid = $('#assement').val();         
     var userid     = $('#user').val();         
     if($('.ansradio').is(':checked')) { 
        var answer = $('input[name=ans]:checked', '#questionajax').val();
        $.ajax({
           type: "POST",
           url: "answer/",
           data: "q_id="+questionid+"&a_id="+assementid+"&answer="+answer+"&user_id="+userid,
           success: function(html){
              $("#questionajax").html(html).show();
           }
        });
     }
     else{
        alert("Please answer the questions");
     }     
  });

});

Collectives™ on Stack Overflow

Why doesn't a jQuery change function work after loading html with AJAX?

3 Answers 3

9 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related