Триггеры запуска триггера JQuery несколько раз

<html> 
<head> 
<script type="text/javascript" src="/jquery/jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("input").select(function(){ 
    $("input").after("Text selected "); 
    }); 
    $("button").click(function(){ 
    $("input").trigger("select"); 
    //$('input')[0].select(); 
}); 
}); 
</script> 
</head> 
<body> 
<input type="text" name="FirstName" value="Hello World" /> 
<br/> 
<button>Trigger select event</button> 
</body> 
</html>

Код выше триггеров выбирает обработчик 3 раза в хроме ... Это 3 части «Текст выбран». Я не знаю почему. Как это исправить? Кстати, если я использую прокомментированный способ, все равно появятся две части. Зачем?Триггеры запуска триггера JQuery несколько раз

источник

2015-07-18 Tipton

кажется как хром ошибка ... штраф в FF и IE – charlietfl

работает Это та же ситуация здесь HTTP: //stackoverflow.com/questions/8238599/jquery-click-fires-twice-when-clicking-on-label – halfzebra

Я бы предложил специальное мероприятие из-за того, что вы делаете здесь две вещи. Чтобы сделать это для данного элемента, я добавил класс (просто чтобы сделать его специфичным для ввода текста, я также добавил этот тип).(Избежав тип кнопки ввода)

Скорректированный разметка:

<input type="text" class="textentry" name="FirstName" value="Hello World" /> 
<br/> 
<button>Trigger select event</button>

Скорректированный код:

$(document).ready(function() { 
    $("input.textentry[type=text]").on('textselect',function() { 
     $("input.textentry[type=text]").select().after("Text selected "); 
    }); 
    $("button").click(function() { 
     $("input.textentry[type=text]").trigger("textselect"); 
    }); 
});

Образец скрипку: http://jsfiddle.net/MarkSchultheiss/gf6rycao/

Примечание ярлык для этого было бы только сделать:

$("button").click(function() { 
    $("input.textentry[type=text]").select().after('TextSelected'); 
});

Обратите внимание на [type=text] я использовал это вместо :text, чтобы потенциальное использование прироста производительности querySelectorAll() в библиотеке

источник

2015-07-18 18:49:21

Ввод этого способа отлично работает, когда я нажимаю кнопку. Желаемая вещь случается. Однако ничего не происходит, когда я выбираю текст вручную. То есть это еще неполно ... – Tipton

Странно, но я исправил это с помощью e.preventDefault();
возможно, когда он выбирает текст, он снова запускает событие.

<html> 
 
<head> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script> 
 
$(function(){ 
 
    $("input").on('select', function(e) { 
 
    e.preventDefault(); 
 
    $(this).after("Text selected "); 
 
    }); 
 
    $("button").click(function(){ 
 
    $("input").select(); 
 
    //$('input')[0].select(); 
 
    }); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 
<input type="text" name="FirstName" value="Hello World" /> 
 
<br/> 
 
<button>Trigger select event</button> 
 
</body> 
 
</html>

источник

2015-07-18 14:42:50 num8er

попробовать это:

$(document).ready(function(){ 
    $("input").on('focus',function(){ 
     $("input").after("Text selected "); 
    }); 
    $("button").click(function(){ 
     $("input").trigger("focus"); 
    }); 
});

источник

2015-07-18 14:48:39

Это немного удивительно. Это происходит не только в Chrome. Но также в Safari и Opera.

Решение 1:

Мое предложение для вас return false;. Поскольку в этом случае обработчик события select должен возвращать значение false. Чтобы мы могли прекратить выполнение дополнительных обработчиков событий select. Но вызов .preventDefault() и .stopPropagation() не достигнет этого. Потому что здесь нет родительско-дочерних отношений для пузырьков событий. Но .preventDefault() и .stopPropagation() также будут делать трюк.

Попробуйте это фрагменты кода:

$(document).ready(function() { 
 
      $("input").select(function() { 
 
       $("input").after("Text selected "); 
 
       return false; 
 
      }); 
 
      $("button").click(function() { 
 
       $("input").trigger("select"); 
 
      }); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<input type="text" name="FirstName" value="Hello World" /> 
 
<br /> 
 
<button>Trigger select event</button>

Решение 2: (согласно вашему требованию)

Попробуйте с .on() и .off() методом. Это будет трюк.

$(document).ready(function() { 
 
      $("input").on('select', appendWord); 
 

 
      $("button").click(function() { 
 
       $("input").trigger('select'); 
 
       $("input").off('select'); 
 
       setTimeout(function() { 
 
        $("input").on('select', appendWord); 
 
       }, 300); 
 
      }); 
 

 
      function appendWord() { 
 
       $("input").after("Text selected "); 
 
      } 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<input type="text" name="FirstName" value="Hello World" /> 
 
<br /> 
 
<button>Trigger select event</button>

Надеется, что это помогает.

источник

2015-07-18 18:36:50

Хотя функция работает, текст не будет выбран таким образом ... – Tipton

Я обновил свой ответ , Попробуйте решение 2, которое соответствует вашим требованиям. –

Триггеры запуска триггера JQuery несколько раз

ответ

Смежные вопросы