Javascript-триггер функция 2 раза при нажатии кнопки

Question

HTML-код:

<div id="txtAge">
    <table>
    <tr>
    <td><input type="checkbox" onclick="checking()" id="ch1" value="1"><td>
    <td><input type="checkbox" onclick="checking()" id="ch2" value="10"><td>
    <td><input type="checkbox" onclick="checking()" id="ch3" value="12"><td>
    <td><input type="checkbox" onclick="checking()" id="ch4" value="3"><td>
    </tr>
    <tr>
    <td><input type="checkbox" onclick="checking()" id="ch5" value="221"><td>
    <td><input type="checkbox" onclick="checking()" id="ch6" value="130"><td>
    <td><input type="checkbox" onclick="checking()" id="ch7" value="132"><td>
    <td><input type="checkbox" onclick="checking()" id="ch8" value="3333"><td>
    </tr>
    </table>

    </div>

Javascript:

function checking(){
$('input[type="checkbox"]').on('change', function() {
            $(this).closest('tr').find('input').not(this).prop('checked', true);
            alert(this.value);
        });
}

Это мой код когда я нажимаю флажок, он предупреждает один раз, когда я нажимаю другой флажок, он предупреждает 2 раза. Почему функция onclick срабатывает более 1 раза, когда я продолжаю нажимать флажок?

Вот демо:

http://jsfiddle.net/L9z9t04p/11/

javascript jquery

0

max cheng 17 Дек 2015 в 10:39

Answer 1

Удалите onclick="checking" как встроенный атрибут из флажка.

Оба будут работать независимо, и вы можете добавить столько слушателей событий к элементу, сколько захотите, так что один не удалит другой автоматически.

Также удалите этот метод проверки, вы можете напрямую связать событие jquery.on

       $('input[type="checkbox"]').on('change', function() {
            $(this).closest('tr').find('input').not(this).prop('checked', true);
            alert(this.value);
        });

Или если вы не хотите удалять метод checking и вызывать его при каких-то условиях, вам необходимо убедиться, что метод checking вызван

function checking(){
$('input[type="checkbox"]').off('change' ); //if the checking() is called multiple times
$('input[type="checkbox"]').on('change', function() {
            $(this).closest('tr').find('input').not(this).prop('checked', true);
            alert(this.value);
        });
}
checking();

3

gurvinder372 17 Дек 2015 в 08:23

Answer 2

Проблема возникает из-за того, что вы привязываете обработчик событий change к каждому встроенному обработчику событий изменения. это продолжит добавлять обработчик событий, и вы будете получать несколько alert в этом случае.

Удалите встроенный обработчик событий change из вашего флажка. Как вы уже связываете его с помощью jQuery.

HTML

<input type="checkbox" id="ch5" value="221">

< EM> Script

$(document).ready(function(){
    $('input[type="checkbox"]').on('change', function() {
        $(this).closest('tr').find('input').not(this).prop('checked', true);
        alert(this.value);
    });
});

1

Satpal 17 Дек 2015 в 08:06

Answer 3

Связываете ли вы событие через слушателя:

 $('input[type="checkbox"]').on('change', function() {

Или вы делаете встроенную привязку к функции:

<td><input type="checkbox" onclick="checking()" id="ch2" value="10"><td>

Не выполняйте оба. Происходит то, что каждый раз, когда вы нажимаете на флажок, вы регистрируете функцию еще раз для события. Таким образом, каждый щелчок предупредит еще раз, что в последний раз

1

Lucas Rodriguez 17 Дек 2015 в 07:45

Answer 4

Удалить onclick = "check ()" из HTML и связать событие изменения для флажка только один раз

0

Muhammad Atif 17 Дек 2015 в 07:45

Answer 5

Каждый раз, когда вы запускаете проверку функции, вы добавляете событие ко всем флажкам. Он будет накапливаться при каждом нажатии. Я попробовал это в вашей скрипке, и это работает:

$(document).ready(function() {
  $('input[type="checkbox"]').on('change', function() {
    $(this).closest('tr').find('input').not(this).prop('checked', false);
    alert(this.value);
  });
});

Кроме того, удалите вызов onclick на своих флажках.

0

neoselcev 17 Дек 2015 в 07:58

Javascript-триггер функция 2 раза при нажатии кнопки

5 ответов

Похожие вопросы

Новые вопросы

javascript