Question

我正在尝试制作一个使用自动完成功能的标签插件（jquery ui：https://jqueryui.com/autocomplete/）。当您单击下拉列表中的值时，它会创建一个带有十字的跨度以将其删除。

我的问题是如何在我的插件中注册新创建的跨度十字标记上的点击事件。

/**
 * Tags Autocomplete
 *
 * Create tags through autocompletion
 */
(function($)
{
    'use strict';

    $.fn.tagsAutocomplete = function(options)
    {
        // defaults
        var defaults = {
            autocomplete : {
                source : "",
                test_data: ["test", "testing", "tester", "John DOe"]
            },
            tags : {
                class : "tag"
            }
        };

        // selected element
        var elm = this;

        // extend the options
        var o = $.extend(true, defaults, options);

        // Start autocomplete
        $(elm).autocomplete({
            minLength: 0,
            source: o.autocomplete.test_data,
            select: function( event, ui ) {
                // add tag to DOM, before the input with a remove_tag
                $(this).before('<span class="tag tag-green tag-new">'+ui.item.value+'' +
                    '<span class="remove_tag"></span>' +
                    '</span>');

                // clear input
                this.value = "";

                // return false
                return false;
            }
        });

        /**
         * Remove span after clicking the cross
         * @param obj
         */
        function removeSpan(obj){
            alert('clicks works');
            //obj.closest(o.tags.class).remove();
            // focus input
            //obj.focus();
        }

        // bind events
        this.bind("click.remove_tag", removeSpan);

        // return elm for chaining
        return elm;
    };
})(jQuery);

我试过这个：this.bind（＆＃34; click.remove_tag＆＃34;，removeSpan）; 但这不起作用。

那么我如何在新的创建范围上添加一个类名为remove_tag

的点击事件

Answer 1

您正在使用名称空间事件，但您并未定位目标类。

要定位新创建的动态范围元素，您可以

elm.parent().on("click", ".remove_tag", removeSpan);

并且因为跨度插入elm元素之前，您必须委托父元素

function removeSpan(evt){
    $(evt.target).closest('.remove_tag').focus().closest(o.tags.class).remove();
}

Answer 2

你尝试过这样的事吗？

$( "#foo" ).bind( "click", function() {
  removespan();
});

Answer 3

我有像这样的removeSpan函数：

    /**
     * Remove span after clicking the cross
     */
    function removeSpan(){
        // remove tag
        $(this).closest($(o.tags.class)).remove();
        // focus input
        $(elm).focus();
    }

点击的跨度将被删除。

我有另一个问题。但首先让我解释一下标签是如何构建的。

这是我的HTML

<div class="tags_container">
     // jquery add the spans (tags) here before the input placeholder
    <input class="tag_input" name="testFoo" type="text" placeholder=""/>
</div>

我看起来很喜欢这个

正如您所看到的，在标记之后有一个输入占位符。现在我想要选择删除退格上的最后一个跨度。我以前试过这个。但是有一些困难。

在图片中，当您计算退格键上的字符并且“j”将退格时，计数为0.当用户现在按退格键时，必须删除最后一个标记。但长度不能为-1。解决这个问题的常用方法是什么。

Jquery插件添加新的点击事件

3 个答案: