委托的点击事件不会触发

Question

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

如果单击“道路”图标，并且在菜单打开加号（“+”）后，将出现一个带有标签的文本输入。这个<ul> 使用jQueryUI Sortable 插件，当然可以在输入后对地址进行排序。

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

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

$(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

您需要设置一个与每个控件标签类相关的变量，以便对其进行控制台记录（或提醒它，或随心所欲地使用它）。

这就是我建议你修改 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/