Выполнение двух задач, одним нажатием

Question

Помогите объединить, чтобы одна кнопка выполняла 2 задачи, открывала модульное окно и фокусировалось на input, input находится в модульном окне спасибо!

function setFocus() {
    var editor = $('#editor');
    var value = editor.val();
    editor.val("");
    editor.focus();
    editor.val(value);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="editor" value="Some Text">
<input type="button" value="Set Focus" onclick="setFocus();" />

<script>

$('#city').focus(function(){
    //open bootsrap modal
    $('#myModal').modal({
       show: true
    });
});

$('#submit').click(function(){
    var cities = [],
        input = $('#cities-form').serializeArray();
    for (i=0; i< input.length; i++) {
        cities.push(input[i].value);
    }
    
    if (cities.length === 0) {
        $('.error').text('please select a city...stupid');
    } else {
        $('.error').text('');
        var data = JSON.stringify(cities);
        console.log(data);
    }
});

</script>

<input id="city" type="text" placeholder="enter a city">

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
    
   </div>
  </div>
</div>

Answer 1

По сути, в вашем случае подход не корректный. Насколько видно, вы используете bootstrap modal, у которых есть свои события

То есть, вам можно по клику открывать модальное окно, а сам фокус добавить уже в событие появления модального окна.

$('#myModal').on('shown.bs.modal', function () {
    // и тут уже ставим фокус на input
    $('#city').focus();
});

Полный код (пример):

$('button').click(function(){
    $('#myModal').modal({
    show: true
  });
});


$('#myModal').on('shown.bs.modal', function () {
    // и тут уже ставим фокус на input
    $('#city').focus();
});

#myModal {
  display: none;
}

.modal-backdrop {
  z-index: -1 !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div id="">
  
</div>

<button>show it!</button>


<div id="myModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
        <input type="text" id="city">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Выполнение двух задач, одним нажатием

Ответы (1 шт):