Question

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

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

ODD BEHAVIOR

object和record已打印，因此我知道有2个元素。
当我点击与对象关联的图像时，会打印record。
当我点击与记录关联的图像时，不会打印任何内容。

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

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

一般来说，这是一个非常糟糕的模式，并且有更多雄辩的方法可以做。但是，理论上可以使这种模式发挥作用。

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

1 个答案: