Jquery插件添加新的点击事件答案

【问题标题】：Jquery plugin add new click eventJquery插件添加新的点击事件
【发布时间】：2017-03-12 09:04:54
【问题描述】：

我正在尝试制作一个使用自动完成功能的标签插件（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("click.remove_tag", removeSpan); 但这不起作用。

那么我怎样才能在新的创建跨度上添加一个带有类名 remove_tag 的点击事件

【问题讨论】：

标签： jquery events dynamic plugins click

【解决方案1】：

你尝试过这样的事情吗？

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

【讨论】：

【解决方案2】：

您正在使用命名空间事件，而不是针对类。

要定位新创建的动态 span 元素，您应该这样做

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

因为 span 是在 elm 元素之前插入的，所以你必须委托给父元素

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

【讨论】：

点击有效，但我怎样才能获得点击的 dom 元素。 function removeSpan(obj){log($(this).text());} // 不工作

【解决方案3】：

我的 removeSpan 函数是这样的：

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

点击的 span 被移除。

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

这是我的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。解决此问题的常用方法是什么。

【讨论】：