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

这基本上有一个下拉菜单并且显示select的值，在展开时它将拉出另一个选择框，该选择框是来自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 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来绑定事件！

动态添加元素并处理事件

2 个答案: