动态添加元素并处理事件

Question

我试图创建一个简单的组合框，但也许JQuery集成的逻辑可能不正确，我想知道是否有一种我可能看不到的更合理的方法来执行此操作。

我有这段代码根据来自mysql的php pull填充了一个下拉列表：

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

这基本上有一个下拉菜单，并根据选择的值确定，展开时将拉出另一个选择框，该选择框是来自php脚本和mysql查询的结果

 $("#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. 
    });

php的输出具有完全相同的字段和字段名。 这应该适用于X数量的选择和扩展，唯一的问题是按钮在第二次输入后将不起作用。

Answer 1

对于动态生成的元素，请使用如下所示的.on()事件委托

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

代替

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

Answer 2

我建议使用href。 您可以在href中调用该函数。

因此，例如：

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

在您的JavaScript中，您可以执行以下操作：（这在script标签内）

<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>

现在，您不需要jquery来绑定事件！