CODEWITHSUNDEEP
javascriptjqueryhtml
CoreyD97
CoreyD97

Reputation: 31

jQuery .on() event ignores selector

I have a function to create a div, ID it and add content before binding it to a click event using the .on() method using a selector as the second parameter. Here is the code I am using.

$('#overlayLeft').append(createOption('Item ID'));

function createOption(name){
    var element = document.createElement('div');
    var noSpaceName = name.replace(" ", "_");
    element.id = 'toolOverlay' + noSpaceName;
    element.innerHTML = '<input type="checkbox"><label>' + name + '</label>';
    $('body').on('click', $('#' + element.id),function(){
        alert("Test");
    });
    return element;
}

However instead of binding the click event to the body using the id of the generated element as the selector, the event acts whenever a click occurs on the body of the page.

How do I get the event to occur only on clicking the element without first creating the element and then binding the event separately?

Upvotes: 2

Views: 102

Answers (5)

Blazemonger
Blazemonger

Reputation: 92893

If you're going to use jQuery, may as well use it everywhere. Note that the .click event is attached to the jQuery object/element as soon as it's created:

$('#overlayLeft').append(createOption('Item ID'));

function createOption(name) {
    var noSpaceName = name.replace(" ", "_");
    var div = $('<div>', {'id': 'toolOverlay' + noSpaceName})
        .append('<label><input type="checkbox">' + name + '</label>')
        .click(function () {
            alert('test');
        });
    return div; // returns a jQuery object now, not a DOM element,
                // which is fine when using .append() as you do here
}

http://jsfiddle.net/mblase75/bdvk9ssa/

Upvotes: 0

4Str4ngeG4me
4Str4ngeG4me

Reputation: 536

You have a strange mix of JQuery and native JS code. Maybe this works for your.

function createOption(){
    return $('<div></div>')
        .attr('id', 'toolOverlay' + name.replace(" ", "_"))
        .append(
            $('<input></input>')
                .attr('type', 'checkbox'))
        .append(
            $('<label></label>')
                .text(name))
        .click(function(){
            alert('test');
        });
}

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82231

You do not need jquery object, you need selector.use:

$('body').on('click', '#' + element.id,function(){
    alert("Test");
});

also you can bind the click event without delegation using:

$('#' + element.id).click(function(){
    alert("Test");
});

Upvotes: 8

Guffa
Guffa

Reputation: 700192

That's not a selector that you are using, it's a jQuery object.

You can solve it by using just the selector, but instead of binding a lot of delegates to the body element, you can just bind the event on the element. That means that you don't need an id on the element to target it.

$('#overlayLeft').append(createOption('Item ID'));

function createOption(name){
  var element = $('<div>');
  element.html('<input type="checkbox"><label>' + name + '</label>');
  element.click(function(){
    alert("Test");
  });
  return element;
}

Binding global delegates is what the live method did, and it was deprecated because that is not a good way to use delegates.

Upvotes: 0

Grissom
Grissom

Reputation: 1082

Try to put just selector string:

$('body').on('click', '#' + element.id,function()

Upvotes: 0

Related Questions