CODEWITHSUNDEEP
javascriptjqueryajax
ahhchuu
ahhchuu

Reputation: 471

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

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();
        }
    });
});

Upvotes: 15

Views: 22210

Answers (3)

Vinoth Smart
Vinoth Smart

Reputation: 403

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");
     }     
  });

});

Upvotes: -1

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

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.

Upvotes: 33

Walter Stabosz
Walter Stabosz

Reputation: 7735

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.

Upvotes: 2

Related Questions