Question

我有一个div，里面有两个选择框。在第一个选择中选择一个项目后，AJAX会在第二个选择框中填写相应的项目。在第二个选择框中选择一个项目后，我想在第一个选项框之后创建一个新的div，并根据第一个div中的值创建一些新的选择框。

似乎.after，.insertAfter，。append在我尝试添加实际的HTML元素（div，h2等）时不会工作。如果我只是将明文添加到.after，它就可以正常工作。

因此，如果我添加$('#form_pt1').after("<div id='test'>Form Part 2</div>")，则不会触发，但如果我只添加文字＆＃39;表格第2部分＆＃39;它将在第一个div之后添加它，但仅作为文本添加，而不是作为元素。

我在这里遗漏了什么吗？它与DOM有关吗？我在IE，Firefox和Chrome中检查了这种行为。它只是在添加div时不会被激发。

<script type="text/javascript">
        $(document).ready(function(){ 
            $("select#signup_cust_type_select").change(function(){
            alert($("#signup_cust_type_select").attr("value"));
            var id = $("select#signup_cust_type_select option:selected").attr('value');
            var zip = $("input#hiddenzip").attr('value');
            $.post("http://someip/wp-content/plugins/exec-php/includes/select_type.php", {zip:zip}, function(data){
                $("select#signup_utility_select").html(data);
                });
            });
            $("select#signup_utility_select").change(function(){
            });
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("input#submitbtn").click(function(){
                $('#form_pt1').after("<p></p><div id='test'>Form Part 2</div>");
            });
        });
    </script>`

和HTML基本上是：

<div id="form_pt1">
    <form id="the_form">
        <select box 1>
        <select box 2>
    </form>
</div>

<div id="new_div_should_go_here"></div>

只有在我编辑这样的代码时，IT才有效：

$(document).ready(function(){
        $("input#submitbtn").click(function(){
            $('#form_pt1').after("Form Part 2");
    });
});

通过删除HTML元素，它会添加单词＆＃39;表单第2部分＆＃39;。

Answer 1

我创建了一个样本小提琴，我认为这是你在问题中所描述的。这是：

<form id="form_pt1">
    <div id="container">
        <select id="one">
            <option>a</option>
            <option>b</option>
        </select>
        <select id="two">
            <option>c</option>
            <option>d</option>
        </select>
    </div>
</form>

然后是jquery代码：

$(function () {
    $('#one').change(function () {
        $('<div class="extra"> extra content here </div>').insertAfter($(this));
    });
});

和here's the link到jsfiddle。

.after（）元素不起作用

1 个答案: