Delegated click event doesn't fire

Question

I am developing a web application. You can find the website here.

If you click on the "road" icon, and after the menu opened the plus sign ("+"), a text input will appear with a label. This <ul> is using the jQueryUI Sortable plugin, to - of course - be able to sort the addresses after input.

The address fields

I would like to add a click event to the label of these address fields, so that when a user clicks the number, a dialog box will appear where he/she can manually edit the number (it can get a little counter-productive if there are hundreds of addresses).

Since the <li> elements, in which the label and the inputs are gets created later, I tried to delegate the click event, like so:

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

However the event never fires. I am starting to think that maybe the sortable plugin disables my events to that label?

Here is the HTML code of an address field (label+input+delete button)

<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 is the addWaypoint() function which adds a new row. This gets called every time when the user clicks the + button.

Edit: Apparently it isnt the sortable plugin, but something else that blocks the click event. Anyone got any ideas?

I just tested that in jsfiddle and it works. must be something else disabling the click event — Rice Junkie
@RiceJunkie I know that there is a way in Chrome's developer console to see what events are attached to an element, but I don't know how to check that. Do you have any ideas? — PeterInvincible
You can select your element in developer tool and on the right hand side where your css styles are listed there is a tab for event listeners — Rice Junkie
@TrisztánThar I've already checked that - you can just see jQuery has attached itself at the various points. Which makes sense - you haven't attached your code directly to click, just asked jQuery to invoke your function when the event happens. I'm trying to repro the actual issue on jsfiddle at the moment... — James Thorpe

Theo Orphanos Theo Orphanos · Accepted Answer · 2014-11-11T20:56:06

You need to setup a variable related to each control-label class in order to console.log it (or alert it, or use it anyway you want).

This is how I suggest you modify the javascript:

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

Maybe this fiddle would help: http://jsfiddle.net/jo6957au/1/

Modified to use li's http://jsfiddle.net/jo6957au/3/

Delegated click event doesn't fire

1 Answers