0

我有这样的形式：

<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="bahan" 中的选择选项

$(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" 中的其他选项......

4

3 回答 3

2

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

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

            }
        });

    });
});

演示：小提琴

于 2013-09-24T05:38:45.403 回答
1

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

  1. <select name="jenis" class="jenis" onclick="theonclickhandler">应该管用。

  2. select将事件推送到文档后立即使用 javascript 绑定事件。

于 2013-09-24T05:41:10.833 回答
0

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

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

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

            }
        });
      });
   });
于 2013-09-24T05:49:09.240 回答