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

Question

$(document).ready(function(){ 
 
    $("input").select(function(){ 
 
     $("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>

Source

Может кто-нибудь сказать мне, почему выбрать событие срабатывает три раза после того, как кнопка мыши?

Кажется, что использование IE и Chrome может привести к разным результатам.

Answer 1

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

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

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

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

Answer 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>

---

в качестве альтернативы, с помощью setTimeout, чтобы выбранный текст должен быть очищен, прежде чем на click из button перед тем .trigger("select") названием; оригинальный обработчик событий должен быть вызван более одного раза в click из button элемента

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

 
    $("button").click(function() { 
 
    setTimeout(function() { 
 
     $("input").trigger("select"); 
 
    }) 
 
    }); 
 

 
});

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

Answer 3

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

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

FIDDLE

Answer 4

Я считаю, что он должен печатать только один раз. Если вы используете 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/

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

Answer 5

Давайте посмотрим, что происходит здесь:

$(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>

Итак, мы имеем 1 isTrigger и 2 простых select событий.

Вы можете фильтровать событие isTrigger, но не можете разбить два других - они одинаковы.

Решение может быть, чтобы не использовать trigger вообще:

$(document).ready(function(){ 
 
    var mark = 0; 
 
    $("input").select(function(e){ 
 
     if(!e.mark) e.mark = ++mark; 
 
     console.log(e, e.mark); 
 
     $("input").after(" Text marked!"); 
 
     e.stopImmediatePropagation(); 
 
    }); 
 
    $("button").click(function(){ 
 
     $("input")[0].setSelectionRange(0, $('input').val().length, 'forward'); 
 
     
 
    }); 
 
});

<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>

Но! Мы видим, что он все еще срабатывает дважды.
Я думаю, что эту ошибку следует сообщить разработчикам Chrome.

---

Как решение - нужно изменить ваш .select обработчик идемпотентным.
и скажите, на .blur Сбросьте состояние этого обработчика.

Answer 6

Необходимо использовать:

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

вместо триггера()

$(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>