如何在动态生成的 div 中定位 Jquery .load 函数

Question

短： 如何在动态生成的 div 中使用 Jquery .load 函数，但定位到未点击的 ID。

我的想法是我有一个按钮，每次使用 jquery 的“$().append()”功能单击“name+(sequential id”) 时都会添加新的 div。将 div 添加到页面后，“$().load()”会用两个选择框和另一个 div 填充 div。

加载后，用户可以使用第一个选择框来选择一个值。

选择值时，“$（）。在jQuery检查中的（'单击”功能，也看到它是第一个选项框，并单击并更改。

此时在第一个选项框被选中并更改后，“().load()”用于更新第二个选项框周围的“#ajax-load-1”div。这是我无法获得“.load”以查看 div 的 ID 的地方。

我做了很多搜索，但空手而归，很多关于如何使用 .on("click" 来获取动态生成但不是未被点击的元素的 ID 的教程。

这是上述代码的简化示例。

HTML：

<!-- |This box has been dynamically generated and named through a Jquery .load() | -->

<div id="dynamic-box-1">

<select id="select-1">

    <option>1</option>

    <option>2</option>

</select>

<!-- | div to be .load()'ed after an option is selected in #select-1 |-->
<div id="ajax-load-1">

    <select id="ajax-select-1">

        <option>1</option>

        <option>2</option>

    </select>

</div>

</div>

<!-- | End of dynamic box | -->

jQuery

$("#select-1").on("click", function(){

$("#select-1").change(function(){

       $("#ajax-load-1").load("../php/ajax-load-1.php");

});

});

Answer 1

尝试使用事件委托

替换

$("#select-1").change(function(){

与

$(document).on('change', '#select-1', function(){

并移除包含它的点击事件。

如果您提供的HTML 是您希望在应用程序中看到的那个。然后你可以用这样的东西得到 div 的id

 $(document).on('change', '#select-1', function(){
     var divId = $(this).next('div').attr('id');
     $("#" + divId ).load("../php/" + divId + '"php");
 });