Javascript is not applied on contents returned through ajax

Question

Javascript: (Send data and will receive json content)

$('#member_group_dropDown').on('change', function () {
    var inputData = {};
    inputData.groupId = $(this).val();
    if (inputData.groupId != "") {
        $.post(myProp.base_url + 'folder/class/method', inputData, function (outputData) {
                $('#selected_group').html(outputData.content);
                $('#selected_group').html();
        }, 'json');
    }
    $('#selected_group').html("");
});

PHP: (The content, which I will get it through ajax)

// assign buffering to variable then, send it for display
ob_start();
echo form_open(base_url('folder/class/method'), array('method' => 'post', 'id' => 'update_memberGroup_form'));
?>
<div class="group_title fontSize_20">
    <span></span>
    permissions<?php echo $memberGroups[0]['group_name']; ?>
</div>
<?php
foreach ($member_permissions as $permission) {
    ?>
    <div class="container">
        <label for="<?php echo $permission['name']; ?>" title="<?php echo $permission['description']; ?>"><?php echo $permission['title']; ?></label>
        <?php if ($permission['input_type'] == 'radio'): ?>
            <input type="radio" name="<?php echo $permission['name']; ?>" value="1"> <span class="fontSize_16">yes</span><input type="radio" name="<?php echo $permission['name']; ?>" value="0"><span class="fontSize_16">no</span>
        <?php else: ?>
            <input type="text" name="<?php echo $permission['name']; ?>" class="required" value="">
        <?php endif; ?>
    </div>
    <?php
}
?>

<div>
    <input type="submit" class="formButton3" value="edit">       
</div>
</form>    
<?php
$content = ob_get_contents();
ob_end_clean();
echo json_encode('content' => $content));

Now, when Apply an event on part of the content which I have received, as follow:

$('#update_memberGroup_form').on('submit', function () {
    alert('hi');

    return false;
});

it is not implemented.

score 0 · Answer 1 · answered Nov 04 '15 at 16:18

Your handler is bound at run time - if the content is dynamically added either use event delegation, or bind the handler after appending:

$.post(myProp.base_url + 'folder/class/method', inputData, function (outputData) {
        $('#selected_group').html(outputData.content);
        $('#selected_group').html();

        $('#update_memberGroup_form').on('submit', function () {
            alert('hi');
            return false;
        });
}, 'json');

Javascript is not applied on contents returned through ajax

1 Answers1