Jquery регистрирует клик по элементу, который не был кликан, странное поведение - PullRequest
Новая
       24

Jquery регистрирует клик по элементу, который не был кликан, странное поведение

2 голосов
/ 15 сентября 2011

С учетом следующего HTML: 

<table>
    <tr>
        <td>
            <img rel="20110914103319-9589184176" src="images/redXblackBackground.png" style="float: left;">
        </td>
    </tr>
</table>

У меня есть следующий код для регистрации даже при щелчке строки. 

$('tr').live('click',function(e){
    var tagType = $(this).get(0).tagName;
    console.log(tagType);
});

И у меня есть следующий код, чтобы сказать, когда изображение щелкает. 

$("td img").live('click',function(e){
    opId = $(this).attr('rel');
    console.log(opId);
});

Проблема в том, что когда я нажимаю на изображение, оно регистрирует, что я нажимаю на элемент tr. Я подумал, что, возможно, это связано с порядком, в котором был заказан блок кода с двумя щелчками, но это не имело никакого значения. Я не понимаю, почему щелчок по изображению регистрирует щелчок по элементу tr, а не по элементу img.

Ответы [ 2 ]

2 голосов
/ 15 сентября 2011

Это происходит потому, что событие распространяется вверх по дереву DOM, вызывая другое ваше событие. Остановите его распространение, и ваш код должен работать: 

$("td img").live('click',function(e){
    opId = $(this).attr('rel');
    console.log(opId);

    e.stopPropagation();
});
0 голосов
/ 15 сентября 2011

Изменить: В моем ответе использовалась функция .click jquery, а в вашем вопросе использовался .live, так что, возможно, мой ответ не так актуален, как в Blender.

Поскольку тег img находится внутри тегов tr, он переходит к функции click на родительском tr.

Единственный способ обойти это, что я когда-либо использовал, это вернуть ложь; после того, как все ваши необходимые JavaScript был завершен.

Например: 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('tr').click(function() {
            alert('tr');
        });

        $('tr span').click(function() {
            alert('span');
            return false;
        });
    });
</script>
<table width="100%">
    <tr style="background: #ccc;">
        <td>
            <span id="test">Test</span>
        </td>
    </tr>
</table>

Возможно, есть лучший способ обойти это, но я так и делаю, потому что мне обычно не нужны события щелчка, чтобы в любом случае возвращать истинное значение false.

...