委派的點擊事件不會觸發

Question

我正在開發一個Web應用程序。 您可以在此處找到該網站。

如果單擊“道路”圖標，並且在菜單上打開加號（“ +”），將顯示帶有標簽的文本輸入。 這個<ul>使用jQueryUI Sortable插件，當然可以在輸入后對地址進行排序。

我想將click事件添加到這些地址字段的標簽中，以便用戶單擊該數字時，將出現一個對話框，在該對話框中，他/她可以手動編輯該數字（如果出現該對話框，可能會適得其反。是數百個地址）。

由於稍后會在其中創建標簽和輸入的<li>元素，因此我嘗試委托click事件，如下所示：

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

但是，該事件永遠不會觸發。 我開始認為也許sortable插件會禁用我對該標簽的事件？

這是地址字段的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>

這是addWaypoint（）函數，用於添加新行。 每次用戶單擊+按鈕時都會調用此方法。

編輯：顯然它不是可排序的插件，但其他東西會阻止click事件。 任何人有任何想法嗎？

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/