Calling on click function with jQuery after getting data with $.post

Question

I am gettting data from other php file with $.post request.

Please check the code first, here, if I click on the click here div with class "getPostData" I will get data from getData.php file. Until this file is working nicely.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
    $('.getPostData').on('click', function(e){
        var xyz = $(this).closest('.dataFromThisRow').children('.inputBox');

        $.post("getData.php", xyz.children('input[name="abcdxyz"]').serialize(),  function(response) {
            xyz.children('.showDataHere').html(response);
        });

    });

    $('.abcd').on('click', function(e) {
      alert("The text has been changed.");
    });

});//]]>
</script>
</head>

<body>
                    <div class="dataFromThisRow">
                        <div class="inputBox">
                            <input type="text" name="abcdxyz" /><div class="getPostData">click here</div>
                            <div class="showDataHere"></div>
                            <div class="clear"></div>
                        </div>
                    </div>
</body>
</html>

But problem start after that

Here is the PHP file I made (a sample PHP file, currently no error on the original one or sample PHP file):

<?php

if(isset($_POST['abcdxyz'])) {
    $abcxxx = array ('b', 'c', 'd', 'f', 'g', 'h', 'j', 'k');
    echo '<select name="abcd" class="abcd"><option value="0" selected="selected">Select An Alphabet</option><optgroup label="Constant">';
    foreach($abcxxx as $abcx) { echo '<option value="'.$abcx.'">'.$abcx.'</option>';}
    echo '</select>';
}

?>

This php file will give you back a drop down list. What I want to do is, after getting data from the php file and showing select dropdown list, if I select (on("change)) from the list (name="abcd"), the input text (name="abcdxyz") will be disabled.

But here I tried with on change or few other commands with jQuery, but none of them are working (even the on click function which I added here, jut for sample).

Any help here?

Satpal · Accepted Answer · 2015-01-26 07:44:18Z

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 creating elements dynamically using html from php.

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

General Syntax

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

Ideally you should replace document with closest static container.

Example, As you are using selectI would recommend change event.

$('.showDataHere').on('change', '.abcd', eventHandler);

Also in your getData.php, you need to class instead of name property

echo '<select class="abcd">';

instead of

echo '<select name="abcd">';

edited Jan 26, 2015 at 7:44

answered Jan 26, 2015 at 7:23

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

3 Comments

Flakes Over a year ago

and just to add, there should be an element with class abcd, and not name

crazymoin Over a year ago

sorry about the class which is my silly mistake here while i was typing. i have to study on Event Delegation than. Thanks

crazymoin Over a year ago

hey, working like magic. many many thanks for help. enjoy india vs aussi game if you are watching. :)

Collectives™ on Stack Overflow

Calling on click function with jQuery after getting data with $.post

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related