Javascript 将单击绑定到jQuery中的两个元素时的奇怪行为

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

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

古怪的行为

对象

和

记录

已打印，因此我知道有两个元素

当我单击与对象关联的图像时，

record

被打印出来

当我单击与记录关联的图像时，不会打印任何内容

---

我不确定如何解决此问题。

使用

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

---

总的来说，这是一个非常糟糕的模式，而且有更多雄辩的方式来做事情。然而，从理论上讲，这种模式是可行的。

从表面上看，这似乎是一个索引问题。查看将

案例0:

更改为

案例1:

和将

案例1:

更改为

案例2:

是否可以解决问题。然后，您需要了解jQuery在使用

每个

时是如何索引项的，还是在页面上的某个地方有一个额外的

img

元素位于其他两个元素之前。有趣。当我将其更改为案例1和案例2时，单击的对象将被打印，当我单击第二个图像时，不会发生任何事情。对象和记录也不再打印。我在表达式im matching上添加了一个console.log，我可以确认只返回了2个图像。为什么要使用

live

绑定单击事件？由于将单击事件附加到DOM中的已知对象（即当前

每次迭代时的图像），因此我看不到它的好处。我用
bind
替换了它，一切都很顺利：查看html代码会有帮助。