Как выбрать целевой элемент и применить пользовательскую функцию?

Question

У меня есть набор элементов select2, и моя функция hideSelect2Keyboard() используется для скрытия клавиатуры при открытии и закрытии select2.

/* Hide keyboard on select2 open event */
function hideSelect2Keyboard(){
    $('.select2-search input, :focus,input').prop('focus',false).blur();
}

$("select").select2().on("select2-open", hideSelect2Keyboard);

$("select").select2().on("select2-close",function(){
    setTimeout(hideSelect2Keyboard, 50);
});

Работает нормально;однако эта функция нацелена на все элементы select в целом, что вызывает у меня проблемы, поскольку некоторые элементы имеют свои собственные обработчики событий onchange и onblur, которые они запускают непреднамеренно.

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

// hide keyboard after select value and drop down list open
function hideSelect2Keyboard(ID){
    $('#'+ID+' .select2-search input, #'+ID+' :focus, #'+ID+' input').prop('focus',false).blur();
}

$("select").select2().on("select2-open", hideSelect2Keyboard(this.id));

$("select").select2().on("select2-close",function(){
    setTimeout(hideSelect2Keyboard(this.id), 50);
});

$("#Gender").select2().on('select2-blur', function() {
  alert('gender selected');
});

/* Hide keyboard on select2 open event */
function hideSelect2Keyboard() {
  $('.select2-search input, :focus,input').prop('focus', false).blur();
}

$("select").select2().on("select2-open", hideSelect2Keyboard);

$("select").select2().on("select2-close", function() {
  setTimeout(hideSelect2Keyboard, 50);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.min.js"></script>

<label for="Salutation">Salutation:</label>
<select class="" name="" id="Salutation">
  <option value="Mrs">Mrs</option>
  <option value="Mr">Mr</option>
  <option value="Miss">Miss</option>
</select>

<label for="Gender">Gender:</label>
<select class="" name="" id="Gender">
  <option value="Female">Female</option>
  <option value="Male">Male</option>
  <option value="Transgender">Transgender</option>
</select>

Тогда это больше не работает, и в консоли также нет ошибок.Что не так, как я могу настроить таргетинг на конкретный элемент и применить функцию hideSelect2Keyboard?Благодаря.

Answer 1

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

$(window).ready(()=>{
  
  function alertId(){
     $(this).toggleClass('clicked');
     console.log(`${$(this).attr('id')} was clicked`);
  }
  
  $('.container-content').on('click', (e)=>{
    if(!$(e.target).hasClass('container-content')){
      $(e.target).one('click', alertId);
    }
  });
});

.container-content {
  height: 30vh;
  background-color: blue;
  margin: 20px;
  transition: background-color 300ms ease-in-out;
}

.clicked {
  background-color: red;
}

.inner-content {
  border: thin solid white;
  height: 40px;
  transition: background-color 300ms ease-in-out;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<div class="container">
  <div class="container-content" id="content-1">
    <div class="inner-content" id="inner-1"></div>
  </div>
  <div class="container-content" id="content-2">
  </div>
  <div class="container-content" id="content-3">
  </div>
</div>

Когда вы запустите это, вы увидите, что при первом нажатии на данный div ничего не происходит (потому что событие click связаноэлемент после того, как вы нажмете на него).Но, как только вы щелкнете по нему еще раз, он станет красным и его идентификатор будет зарегистрирован на консоли.

Кроме того, вот рабочий пример :)

Answer 2

$("#Gender").select2().on('select2-blur', function() {
 // alert('gender selected');
});

/* Hide keyboard on select2 open event */
function hideSelect2Keyboard(selectorId) {
  var ID = '#'+selectorId;
  alert(ID);
  $(ID+' .select2-search input,'+ID+' :focus,'+ID+' input').prop('focus',false).blur();
 
}

$("select").select2().on("select2-open", function(){
// here you can think whether you pass id or not;
//var selectId = $(this).attr('id');
hideSelect2Keyboard('passnoid');
});

$("select").select2().on("select2-close", function() {
    var selectId = $(this).attr('id');
    hideSelect2Keyboard(selectId);
    var selectedItem =  $(this).find(':selected').val();
    if(selectedItem =="Miss"){
        alert("Do something");
    }
  setTimeout(hideSelect2Keyboard, 50);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.min.js"></script>

<label for="Salutation">Salutation:</label>
<select class="" name="" id="Salutation">
  <option value="Mrs">Mrs</option>
  <option value="Mr">Mr</option>
  <option value="Miss">Miss</option>
</select>

<label for="Gender">Gender:</label>
<select class="" name="" id="Gender">
  <option value="Female">Female</option>
  <option value="Male">Male</option>
  <option value="Transgender">Transgender</option>
</select>