动态表单 + ajax 不起作用答案

【问题标题】：Dynamic form + ajax doesn't work动态表单 + ajax 不起作用
【发布时间】：2013-09-24 05:36:10
【问题描述】：

我有这样的表格：

<form action="index.php" method="get" name="gizi">
  <div id="itemRows">
    <input onclick="addRow(this.form);" type="button" value="Add row" />
  </div>
</form>

这是我的脚本（..如果我单击“添加行”按钮，它将添加新行....）

<script type="text/javascript">
var rowNum = 0;
function addRow(frm) {
   rowNum ++;
   var row = '<div class="rowNum'+rowNum+'">Select Manufacture: <select name="jenis" class="jenis"><option selected="selected">--Select manufacture--</option><option value="1">Toyota</option><option value="2">Nissan</option><option value="3">Honda</option></select> Select Car: <select name="bahan" class="bahan"><option selected="selected">--Select Car--</option></select> <input type="button" value="Remove" onclick="removeRow('+rowNum+');"></div>';
   jQuery('#itemRows').append(row);
   frm.add_qty.value = '';
   frm.add_name.value = '';
}

function removeRow(rnum) {
  jQuery('#rowNum'+rnum).remove();
}
</script>

我有其他脚本，.. 我使用它来填充基于 ajax 的其他选择选项，.. 示例：我选择 Toyota（在 class="jenis"），.. 然后 ajax 将填充选择选项 class="巴汉”

$(document).ready(function() {
    $(".jenis").change(function() {
        var id = $(this).val();
        var dataString = 'jenis=' + id;
        var $this = $(this);
        $.ajax({
            type: "POST",
            url: "ajax_menu.php",
            data: dataString,
            cache: false,
            success: function(html) {
                $this.siblings(".bahan").html(html);

            }
        });

      });
   });

现在事实是当我在 class="jenis" 中选择选项时，.. ajax 不会填充 class="bahan" 中的其他选项......

【问题讨论】：

标签： jquery ajax

【解决方案1】：

由于选择框是动态创建的，所以需要使用事件委托

$(document).ready(function () {
    $('#itemRows').on('change', ".jenis", function () {
        var id = $(this).val();
        var dataString = 'jenis=' + id;
        var $this = $(this);
        $.ajax({
            type: "POST",
            url: "ajax_menu.php",
            data: dataString,
            cache: false,
            success: function (html) {
                $this.siblings(".bahan").html(html);

            }
        });

    });
});

演示：Fiddle

【讨论】：

【解决方案2】：

它不起作用，因为您正在动态创建 .jenis 选项并将事件绑定到 document.ready。你可以做两件事：

<select name="jenis" class="jenis" onclick="theonclickhandler"> 应该可以工作。
在select被推送到文档后立即用javascript绑定事件。

【讨论】：

是的，我认为委托是解决这个问题的正确方法，但我也认为 bind 也可以，尽管它不是那么优雅。

【解决方案3】：

您遇到了事件委托的问题，因为在您现有的事件中应用了在文档准备好时不可用的元素，因此不会以这种方式获得直接事件。

要克服这个问题，您必须以事件委托的方式放置您的代码。您可以将事件委托给可用的现有静态父级或直接委托给文档本身，因为文档始终可用：

$(document).ready(function() {
    $("#itemRows").on("change", ".jenis", function() {
        var id = $(this).val();
        var dataString = {"jenis" : id};
        var $this = $(this);
        $.ajax({
            type: "POST",
            url: "ajax_menu.php",
            data: dataString,
            cache: false,
            success: function(html) {
                $this.siblings(".bahan").html(html);

            }
        });
      });
   });

【讨论】：

哈，@Arun P Johny 在这个答案上打败了你。非常相似。
是的，但我也添加了更多解释。