2

これが私の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」をクリックすると、マークアップで前述した完全なスパンタグが再度生成されます。

問題はテキストボックスをクリックすることであり、スパン構造も生成されます。「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();
        }

状況を回避する方法は何ですか。

4

1 に答える 1

1

このjsfiddleを確認してください：

http://jsfiddle.net/xemhK/

問題はprepandToステートメントです。これは#ancNewアンカータグの要素をプリパディングしているため、すべてのテキストボックスと削除アンカーが#ancNewのクリックイベントを伝播し、generateNewHierarchy（）関数を呼び出しています。

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

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

およびcreateElementsで

if (elem == "a") {
    newElem.innerHTML = "Remove";
    $(newElem).attr("href","#").click(function (e) {
        RemoveHierarchy(this,e);
    });
}
于 2012-07-23T08:21:38.557 に答える