javascript - 将单击绑定(bind)到 jQuery 中的两个元素时的奇怪行为

Question

我有两张标题为“显示选项”的图片。我想为它们都分配一个点击事件，我希望点击打印不同的语句。

 console.log($('img[title*=\"Show\"]'));
  $('img[title*=\"Show\"]').each(function(index, value){
    switch(index){
        case 0:
            console.log('object');
            $(this).live('click', function(e) {
                console.log('object clicked');
            });
        break;

        case 1:
            console.log('record');
            $(this).live('click', function(e) {
                console.log('record clicked');
            });
        break;
    }
  });

奇怪的行为

1. object 和 record 被打印出来，所以我知道有 2 个元素。
2. 当我点击与对象关联的图像时，打印record。
3. 当我点击与记录关联的图像时，没有打印任何内容。

我不确定如何解决这个问题。

Answer 1

.live 方法的目的是允许您在可能更改或尚不存在的 DOM 对象上指定事件处理程序。这是可行的，因为实际上根本没有附加任何处理程序。相反，文档根部的一个预先存在的处理程序会查看所有使用 .live() 注册的选择器，以确定它们是否匹配。

在您的示例中，您直接传入 DOM 对象，而不是 jQuery 选择器。因此，可能发生的事情(尽管我不确定)是它试图将实时事件附加到通过字符串化 DOM 对象创建的选择器，这可能会导致奇怪的、意外的结果。

如果您尝试将事件附加到不会更改的单个 DOM 对象，只需使用 .bind() 函数即可。

如果您真的需要使用 live，您可以重构代码，以便指定与元素匹配的选择器。例如:

var selector = 'img[title*=\"Show\"]';
$(selector).each(function(index, value){
    switch(index){
        case 0:
            console.log('object');
            $(selector+":eq(0)").live('click', function(e) {
                console.log('object clicked');
            });
        break;

        case 1:
            console.log('record');
            $(selector+":eq(1)").live('click', function(e) {
                console.log('record clicked');
            });
        break;
    }
});

总的来说，这是一个非常糟糕的模式，还有很多更 Eloquent 方式来做事。但是，理论上可以使这种模式发挥作用。