无法通过JQuery访问选择框

Question

I have a div and its content changes depending on the value of a select box above of the div(I am making and ajax call to a php page to do this and there is no problem with that). After the pages's content changed there will be an another select box inside of the div(this select box comes after first ajax response). What i want to do is making an another ajax call by using this select box's change event but i couldnt access this select box via jquery. What can be the reason of this ? Here is my implementation:

HTML:

<div id="formTypeSelectionDiv">
    <label>Select the internship type you want to edit:</label></br></br>
    <select id="formTypeSelection">
        <option value="">--select--</option>
        <option value="IENG349">IENG 349 Grades</option>
        <option value="IENG449">IENG 449 Grades</option>
        <option value="IENG349Stage2">IENG 349 Stage 2 Form</option>
        <option value="IENG449Stage2">IENG 449 Stage 2 Form</option> 
    </select>
</div>
<div id="resultDiv">
//The selectbox will be here after first ajax response and it will be like that
    <select id='fieldOfBusinessEditSelectBox'>
        <option value=''>--select--</option>
        <option value='1'>Production</option>
        <option value='2'>Service</option>
    </select> 
</div>

JQuery:

$("#fieldOfBusinessEditSelectBox").change(function(){
    var value = $("select#fieldOfBusinessEditSelectBox option:selected").val();
    alert(value);
});

Answer 1

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the event binding call.

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

As you are loading using AJAX.

You need to use Event Delegation. You have to use .on() using delegated-events approach.

General Syntax

$(document).on(event, selector, eventHandler);

As per your code

$(document).on('click', '#fieldOfBusinessEditSelectBox', function(){
    var value = $(this).val();
});