0

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

如果我尝试添加实际的 HTML 元素（div、h2 等），.after、.insertAfter、.append 似乎不起作用。如果我只是将纯文本添加到.after，它就可以了。

因此，如果我添加$('#form_pt1').after("<div id='test'>Form Part 2</div>")它不会触发，但如果我只添加文本“Form Part 2”，它将在第一个 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>

只有当我像这样编辑代码时它才有效：

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

通过删除 HTML 元素，它添加了“Form Part 2”字样。

4

1 回答 1

0

我创建了一个示例小提琴，我认为它正在执行您在问题中描述的操作。这里是：

<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));
    });
});

这是 jsfiddle的链接。

于 2013-07-09T18:35:40.543 回答