Question

我在这里理解一个概念有些困难。我正在尝试创建一个jQuery脚本，在div元素上的mouseenter上会有一个显示在div元素顶部的按钮。这部分工作正常。但是，当我使用mouseout时，我不知道如何告诉jQuery删除创建的任何按钮。我尝试使用remove（）方法然后，再次在mouseenter上按钮没有显示。请协助。

HTML：你好＆LT; /按钮＆GT; - ＆GT;

    <!-- Include JS Files -->
    <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/tag_custom.js" type="text/javascript" charset="utf-8"></script>
</body>

CSS：

.divbutton {
    height: 100px;
    background: #0000ff;
    margin-bottom: 5px;
}

JS：

$(document).ready(function () {

    $(document).on('mouseenter', 'div', function () {
        // check if there's already an added data, if not set status to false
        var status = $(this).data('added') || false;
        // if status is false then create a new element
        if (!status) {
            var tag = $('<button>', {
                text: 'Tagit',
                'class': 'tagit_click',
                click: function(){
                    // TODO: fetch and save data to JSON from here
                    console.log(this);
                }
            })
            // append the element and set the added to true so we don't do that stuff next time
            $(this).append(tag).data('added', true);
        }

    }).mouseout(function(){
        // hide or remove the tagit button on mouseout
    })
});

http://jsfiddle.net/FWG8R/277/

Answer 1

尝试使用.has()，.is()检查div是否包含.tagit_click元素。

$(document).ready(function () {

    $(this).on("mouseenter", "div", function () {
        // does `div` contain `tagit_click` element ?
        // if not, create `button` element ,
        // append `button` to `div`
        if (!$(this).has(".tagit_click").is("*")) {
            var tag = $("<button>", {
                "text": "Tagit",
                "class": "tagit_click",
                "click": function () {
                    // TODO: fetch and save data to JSON from here
                    console.log(this);
                }
            })
            $(this).append(tag);
        }

    }).on("mouseout", function () {
        // hide or remove `button` on `mouseout`
        $(".tagit_click").detach()            
    })
});

jsfiddle http://jsfiddle.net/FWG8R/280/

jQuery Mouseout问题与remove（）方法有关

1 个答案: