adding elements dynamically and handling events

Question

I was attempting to create a simple combo box but perhaps the logic for JQuery integration may not be correct, I wanted to know if there was a more logical way to do this that I might not be seeing.

I have this code that populates a dropdown based on a php pull from mysql:

                       echo "<td width=\"150\">
                        <div class=\"select\"><select name=\"levelDrop\" class=\"openForm\" id=\"levelDrop\">
                        <option value=\"NULL\">--- Select Level ---</option>";
                        include("***/phpFunctions/****.php");
                        $sql = "SELECT * From EXAMPLETABLE where COLUMNAMEEXAMPLE = HARDCODEDNUMBER";
                        $result = mysql_query($sql);

                        while($row = mysql_fetch_array($result)){
                            echo "<option value=\"".$row['PRIMARYKEY']."_".$row['NUMBER']."\">".$row['NAME']."</option>";
                        }
                        mysql_close($link);
                    echo "</select></div>
                </td>
                <td id=\"expandBtn\">
                    <input type=\"button\" class=\"expandBtn\" id=\"expandBtn\" value=\"Expand\"/>
            </td>";

This basically has a dropdown menu and depnding on the value of the select, on expand it will pull up another select box that was a result of a query from a php script and mysql query

 $("#expandBtn").click(function(){
        i++;
        var checkSelect = $("#levelDrop option:selected").val();
        if(checkSelect !== "NULL"){
            var itemSelected = $("#levelDrop option:selected").val();
            alert(itemSelected);
            $.ajax({ url: '****/phpFunctions/actions/getSelectList.php',
            data: {w: itemSelected, x: i},
            type: 'GET',
            success: function(output) {
                  alert(output);
                $("#expandBtn").remove();
                $("#levelsRow").append(output);

              }
        });
        }//end if check select 
        //send the variable to getFeatures list and have it reuturn in the divison and print the value in application. 
    });

the output of the php has the exact same fields and fieldnames. This should be applicable for X amount of select and expands, the only issue is that the button won't work after the second input.

See these posts for info on how to use delegated event handling for dynamically added elements: http://stackoverflow.com/questions/8752321/jquery-live-vs-on-method-for-adding-a-click-event-after-loading-dynamic-ht/8752376#8752376 and http://stackoverflow.com/questions/9814298/does-jquery-on-work-for-elements-that-are-added-after-the-event-handler-is-cre/9814409#9814409. — jfriend00, Jan 29 '14 at 21:38

score 1 · Accepted Answer · answered Jan 29 '14 at 21:20

1

For dynamically generated elements, use event delegation using .on() like below

$(document).on('click', '#expandBtn', function(){

instead of

$("#expandBtn").click(function(){

answered Jan 29 '14 at 21:20

Venkata Krishna

14,926
5
42
56

Thanks for this, WOuld this be inside of the $(document).ready function or will this be separate of that? – user1058359 Jan 29 '14 at 21:26
Hi, So the click started responding to the button; however, it keeps referencing the first select (I'm assuming since the id's are the same and those are the original) is there a way to keep expanding but having the JQuery dynamically reference the ID of the newly created select box? – user1058359 Jan 29 '14 at 21:41
@user1058359 - you shouldn't have duplicate IDs in your DOM. Please remove them and use different ones. Also, use classes to target whenever needed if they need to behave similarly when clicked. – Venkata Krishna Jan 29 '14 at 21:43
Could you expand on what you meant by classes? CSS class or are there JQuery classes? – user1058359 Jan 29 '14 at 21:52
@user1058359 - both are same. essentially, you write your classes to html elements and target them via CSS and jQuery. – Venkata Krishna Jan 29 '14 at 23:45

score 0 · Answer 2 · edited Apr 28 '14 at 10:13

I would suggest to make use of an href. You can call the function in your href.

So for example:

<?php
echo "<a href="javascript:functionToExpand(" . $row["ID"] . ");" class='your_style_class'>Expand</a>";
?>

In your javascript you can do this: (this is within the script tags)

<script type="text/javascript">
function functionToExpand(id_of_row) {
  //Do what you want to do
  //Can be same implementation of $("").click(function() { //this code });
}
</script>

Now you dont need jquery to bind events!

adding elements dynamically and handling events

2 Answers2