委派的点击事件不会触发

Question

我正在开发一个Web应用程序。您可以找到网站here。

如果单击“道路”图标，菜单打开加号（“+”）后，将显示带有标签的文本输入。这个<ul>正在使用jQueryUI Sortable插件 - 当然 - 能够在输入后对地址进行排序。

我想在这些地址字段的标签上添加一个点击事件，这样当用户点击该号码时，会出现一个对话框，他/她可以手动编辑该号码（它可以得到一些反...如果有数百个地址，那就很有效率。）

由于后来创建了标签和输入的<li>元素，我尝试委托click事件，如下所示：

$(document.body).on('click', '.control-label', function () {
    console.log($(this));
});

然而事件永远不会发生。我开始认为可能的可排序插件会禁用我的事件到那个标签？

以下是地址栏的HTML代码（标签+输入+删除按钮）

<li>
    <div class="form-group">
        <label class="col-md-1 control-label">1.</label>
        <div class="col-md-11 input-group">
            <input type="text" name="waypoints[]" class="form-control form-control-square waypoint animated fadeInRight" placeholder="Megálló" autocomplete="off" required=""><span class="input-group-btn animated fadeInRight"><button type="button" class="btn btn-square btn-danger btn-removewaypoint animated fadeInRight">×</button></span>
            <div class="search-suggestions">
                <ul></ul>
            </div>
        </div>
    </div>
</li>

Here是addWaypoint（）函数，它添加了一个新行。每次用户单击+按钮时都会调用此方法。

编辑：显然它不是可排序的插件，而是阻止点击事件的其他东西。有人有任何想法吗？

Answer 1

您需要设置一个与每个控件标签类相关的变量，以便console.log（或提醒它，或者无论如何都使用它）。

我建议您修改javascript：

$(document.body).on('click', '.conrtol-label', function () {
    var spanText=$(this).text();
    console.log($(this));
    alert(spanText);
});

也许这个小提琴会有所帮助：http://jsfiddle.net/jo6957au/1/

修改为使用li http://jsfiddle.net/jo6957au/3/