Question

我有一个函数来创建div，ID，并在使用.on（）方法将选择器作为第二个参数将其绑定到click事件之前添加内容。这是我正在使用的代码。

$('#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;
}

但是，不是使用生成的元素的id作为选择器将click事件绑定到body，而是只要在页面主体上发生单击，该事件就会起作用。

如何在没有先创建元素然后单独绑定事件的情况下单击元素时才能使事件发生？

Answer 1

你不需要jquery对象，你需要selector.use：

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

您也可以使用以下命令绑定click事件而不进行委派：

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

Answer 2

你有一个奇怪的混合JQuery和本机JS代码。也许这适用于你。

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');
        });
}

Answer 3

尝试只放置选择器字符串：

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

Answer 4

那不是你正在使用的选择器，它是一个jQuery对象。

您可以通过仅使用选择器来解决它，但不是将大量委托绑定到body元素，您只需绑定元素上的事件即可。这意味着您不需要元素上的id来定位它。

$('#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;
}

绑定全局委托是live方法所做的，并且已被弃用，因为这不是使用委托的好方法。

Answer 5

如果您要使用jQuery，也可以随处使用它。请注意，.click事件在创建后立即附加到jQuery对象/元素：

$('#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/

jQuery .on（）事件忽略选择器

5 个答案: