Javascript 单击文本框事件时出现冒泡

这是我的HTML结构

<div id="dvHirearachy" class="MarginTB10">
    <span>
        <label>Hierarchy Names</label><br />
        <input type="text" name="txtHierarchy" />
        <a id="ancRemove" href="#">Remove</a>
    </span><br />
    <a id="ancNew" href="#">New Hierarchy Name</a>
</div>

层次结构名称

单击锚定标记“ancNew”，我将再次生成标记中提到的完整span标记

问题在于单击文本框时，也会生成跨度结构。我在点击“ancRemove”时遇到的问题与我试图阻止事件冒泡时遇到的问题相同，它对此有效，但对文本框无效

我的剧本

 $(document).ready(function () {

            $("#ancRemove").click(function (e) {
                RemoveHierarchy(this, e);
            });

            $("#ancNew").click(function (e) {
                generateNewHierarchy(e);
            });
});
 function generateNewHierarchy(e) {
            if (window.event) {
                var e = window.event;
                e.cancelBubble = true;
            } else {
                e.preventDefault();
                e.stopPropagation();
                var container = createElements('span', null);
                $(container).append(createElements('input', 'text'));
                $(container).append(createElements('a', null));
                $(container).append("<br/>").prependTo("#ancNew");
                $(container).children('input[type=text]').focus();
            }
        }

        function createElements(elem,type) {
            var newElem = document.createElement(elem);

            if (type != null) {
                newElem.type = "input";
                newElem.name = "txtHierarchy";
                $(newElem).addClass('width_medium');
            }

            if (elem == "a") {
                newElem.innerHTML = "Remove";
                $(newElem).click(function (e) {
                    RemoveHierarchy(this,e);
                });
            }
            return newElem;
        }

        function RemoveHierarchy(crntElem, e) {
            e.stopPropagation();
            $(crntElem).parents("span:first").remove();
        }

$（文档）.ready（函数（）{
$（“#删除”）。单击（函数（e）{
移除层次结构（this，e）；
});
$（“#ancNew”）。单击（函数（e）{
世代共治（e）；
});
});
函数生成器层次结构（e）{
if（window.event）{
var e=window.event；
e、 取消气泡=真；
}否则{
e、 预防默认值（）；
e、 停止传播（）；
var container=createElements（'span'，null）；
$（container）.append（createElements（'input'，'text'））；
$（container）.append（createElements（'a'，null））；
$（container）.append（“
”）.prependTo（“#ancNew”）；
$（container）.children（'input[type=text]'）.focus（）；
}
}
函数createElements（元素，类型）{
var newElem=document.createElement（elem）；
if（type！=null）{
newElem.type=“输入”；
newElem.name=“txtHierarchy”；
$（newElem）.addClass（'width_medium'）；
}
如果（元素==“a”）{
newElem.innerHTML=“删除”；
$（newElem）。单击（函数（e）{
移除层次结构（this，e）；
});
}
返回newElem；
}
函数RemoveHierarchy（crntElem，e）{
e、 停止传播（）；
$（crntElem）.parents（“span:first”）.remove（）；
}

避免这种情况的方法是什么。

检查此JSFIDLE：

问题是prepandTo语句，它正在预加载#ancNew anchor标记中的元素，这就是为什么所有textbox和remove anchor都在传播#ancNew的单击事件，它正在调用generateNewHierarchy（）函数

更改

$（容器）。追加（
”）.prepandTo（“#ancNew”）到
$（容器）。追加（
）。插入之前（“#ancNew”）

我在此请求JSFIDLE:）
function generateNewHierarchy(e) {
    if (window.event) {
        var e = window.event;
        e.cancelBubble = true;
    } else {
        e.preventDefault();
        e.stopPropagation();
        var container = createElements('span', null);
        $(container).append(createElements('input', 'text'));
        $(container).append(createElements('a', null));

        //$(container).append("<br/>").prepandTo("#ancNew");
        $(container).append("<br/>").insertBefore("#ancNew");

        $(container).children('input[type=text]').focus();
    }
}

if (elem == "a") {
    newElem.innerHTML = "Remove";
    $(newElem).attr("href","#").click(function (e) {
        RemoveHierarchy(this,e);
    });
}