Question

I’m trying to make a tag system like the one here but if the tag wasn’t found in the database I want to be able to allow the user to submit it.

I’m using chosen (here) and jquery. I have chosen working how I’d like it but I can’t run my .click() event. Any ideas?

Thanks

<form>
<select multiple="multiple" id="jqtags" style="width:400px;height:30px !important;">
    <?php getTags(); ?>
</select>
<input type="submit" />
</form>

$(document).ready(function(){
    c.init.page();
});
$('form').submit( function() {
    var tags = $('#jqtags').val()
    return false;
});
$("#jqtags").chosen();

$('.no-results').click(function() {
    alert('123');
});

.no-results is generated by chosen and isn’t there on page load if that helps anything

Answer 1

.no-results is generated by chosen and isn’t there on page load

That is the problem. Because the element is not in the DOM when you try to bind the event, it doesn’t get bound. You can delegate the event higher up the DOM tree. The jQuery on method allows you to do this by passing in a selector.

If .no-results is added as a descendant of the form element, you could do this:

$("form").on("click", ".no-results", function() {
    alert('123');
});

This works because DOM events tend to bubble up the tree from the element on which they originate. If you bind the event handler on an ancestor element, it gets captured when the bubbling reaches that element. The on method checks to see if the origin matches a selector and executes the event handler if so.