Question

我有这样的形式：

<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的其他选择选项，..示例：我选择丰田（在class =“jenis”），..然后ajax将填充class =“中的select选项”巴汉“

$(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”中填充其他选项......

Answer 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

Answer 2

它无效，因为您正在动态创建.jenis选项并在document.ready上绑定事件。你可以做两件事：

<select name="jenis" class="jenis" onclick="theonclickhandler">应该有效。
在文档中按select后立即使用javascript绑定事件。

Answer 3

您遇到了事件委托问题，因为您现有的事件已应用于在doc准备就绪时无法使用的elem，因此不会以这种方式获取直接事件。

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

$(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);

            }
        });
      });
   });

动态表单+ ajax不起作用

3 个答案: