Странное поведение вложенной функции

@AngrySpoon · Регистрация: 26.01.2015

Author24 — интернет-сервис помощи студентам

Добрый день!

Ситуация следующая:
есть табличка

HTML5

<table border="1px">
    <thead>
        <th>1</th>
        <th>2</th>
    </thead>
    <tbody>
        <tr>
            <td class='rem'>1.1</td>
            <td class='rem'>1.2</td>
        </tr>
        <tr>
            <td class='rem' onclick="GoRemove()">1</td>
            <td class='rem' onclick="GoRemove()">2</td>
        </tr>
    </tbody>
</table>

на ячейках второй строки таблицы, как вы видите, висит обработчик:

Javascript

function GoRemove() {
    alert('js start');
    $('td.rem').click( function() {
        alert($(this).parent().find("td:eq(0)").html());
        return false;
    });
    alert('js end');
}

При первом нажатии не происходит вызова внутренней процедуры, при втором - вложенная процедура вызывается дважды, при третьем - трижды и так далее.

Почему так происходит? Как это можно обойти?

@Vadim_Lasso · 09.09.2015, 15:43

Лучше не использоваться устаревший атрибут onclick, а задавать обработчики в самом JS, например так: https://jsfiddle.net/3122zha2/

HTML5

<table border="1px">
    <thead>
        <th>1</th>
        <th>2</th>
    </thead>
    <tbody>
        <tr>
            <td class='rem'>1.1</td>
            <td class='rem'>1.2</td>
        </tr>
        <tr>
            <td class='rem' data-go="remove">1</td>
            <td class='rem' data-go="remove">2</td>
        </tr>
    </tbody>
</table>

Javascript

$(function() {
    $('td[data-go="remove"]').on('click', function() {
        alert('js start');
        alert($(this).parent().find("td:eq(0)").html());
        alert('js end');
        return false;
    });
});

@AngrySpoon · 09.09.2015, 15:48 **[ТС]**

Благодарю за исчерпывающий ответ!

маленькое уточнение: если я буду динамически создавать строку, то на нее нужно будет bind'ом повесить этот обработчик? или автоматом подтянется при указании селектора?

@Vadim_Lasso · 09.09.2015, 15:56

Наоборот bind как-раз не имеет возможности увидеть динамически созданную строку, для этого используйте метод live, а лучше on

@AngrySpoon 0 / 0 / 0 Регистрация: 26.01.2015 Сообщений: 3
	09.09.2015, 15:48 [ТС]	3
	Благодарю за исчерпывающий ответ! маленькое уточнение: если я буду динамически создавать строку, то на нее нужно будет bind'ом повесить этот обработчик? или автоматом подтянется при указании селектора? 0

@Vadim_Lasso 433 / 352 / 259 Регистрация: 29.11.2011 Сообщений: 628
	09.09.2015, 15:56	4
	Наоборот bind как-раз не имеет возможности увидеть динамически созданную строку, для этого используйте метод live, а лучше on 0

Странное поведение вложенной функции

Решение