JQuery - Почему метод триггера вызывает его три раза?

Ответ 1

В IE и Firefox это отлично работает. Отметили проблему только в Chrome

Это, похоже, происходит потому, что событие становится пузырящимся. Если вы проверите это с помощью инструментов разработчика, вы можете увидеть дополнительную информацию

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

Следующие два обращения одной и той же точки останова $("input").after(" Text marked!"); Инструменты разработчика показывают почти аналогичный набор атрибутов. Обратите внимание, что атрибут bubbles имеет значение true

Ответ 2

JQuery - Почему метод триггера вызывает его три раза?

Появится для вызова дважды в событии click button; в

$("input").trigger("select");

и обработчик по умолчанию для события select

$("input").select(function(){
    $("input").after(" Text marked!");
});

Чтобы позвонить один раз в click из button или выбрать пользователя в поле input, попробуйте проверить event.isTrigger, чтобы определить, вызвана ли event по .trigger()

$(document).ready(function(){
    $("input").select(function(e){
      if (!e.isTrigger)
        $("input").after(" Text marked!");
    });
    $("button").click(function(){
        $("input").trigger("select");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input />
<button>click</button>

Ответ 3

Посмотрим, что здесь происходит:

$(document).ready(function(){
    $("input").select(function(e){
        console.log(e, e.isTrigger);
        $("input").after(" Text marked!");
    });
    $("button").click(function(){
        $("input").trigger("select");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


<input type="text" value="Hello World"><br><br>

<button>Trigger the select event for the input field</button>

Ответ 4

Вы можете использовать . one

$(document).ready(function(){
    $("input").one('select',function(){
        $("input").after(" Text marked!");
    });
    $("button").click(function(){
        $("input").trigger("select");
    });
});

FIDDLE

Ответ 5

Я считаю, что он должен печатать только один раз. Если вы используете FireFox или IE, он действительно печатает только один раз. Если вы настроите код так, чтобы он использовал другой тип обработчика событий, он запускается только один раз в Chrome.

Пример:

<script>
$(document).ready(function(){
    $("input").focus(function(){
        $("input").after(" Text marked!");
    });
    $("button").click(function(){
        $("input").trigger("focus");
    });
});
</script>

Работая демонстрация вышеперечисленного: http://jsfiddle.net/gratiafide/3636q8rw/1/

Таким образом, я подозреваю, что это "ошибка" Chrome, которую он печатает 3 раза. Обратите внимание, что использование метода triggerHandler() печатает сообщение только один раз, как ожидалось: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_triggerhandler_trigger

Ответ 6

Должен использовать:

$("input").triggerHandler("select");

вместо trigger()

$(document).ready(function(){
    $("input").select(function(){
        $("input").after(" Text marked!");
    });
    $("button").click(function(){
        $("input").triggerHandler("select");
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" value="Hello World"><br><br>

<button>Trigger the select event for the input field</button>