.select () не работает для td, пока tr добавляется через jquery

Question

У меня есть tr, которые добавляются через jquery при нажатии на ввод. Я хочу, чтобы один из них был выбран по умолчанию при добавлении. Это можно редактировать, но не вводить тег.

Я использую это:

$("#qty_1").select();

Но это не сработало.

Вот мое демо: https://jsfiddle.net/vrunda22/fvhnspg4/53/

Answer 1

Заменил ваш mouseout на blur, что я считаю более хорошим в этой ситуации.

Это обновление, которое я сделал для достижения

$("#productsearch").on('blur', function (e) {
    var cell = document.getElementById('qty_1');
    setTimeout(function () {
        e.stopPropagation()
        var range, selection;
        if (document.body.createTextRange) {
            range = document.body.createTextRange();
            range.moveToElementText(cell);
            range.select();
        } else if (window.getSelection) {
            selection = window.getSelection();
            range = document.createRange();
            range.selectNodeContents(cell);
            selection.removeAllRanges();
            selection.addRange(range);
        }
    }, 30);
});

Добавлен рабочий фрагмент. Надеюсь, это поможет вам. :)

var $ = jQuery;

$("#productsearch").on('click', function(e) {
  var product_html = '';
  product_html += '<tr id="product_1">' +
    '<td class="pt-15 pb-15" id="product_name_1" name="product_name[]"><a id="popupid_1" onclick="return productdetailpopup(this);"><span class="informative">Wheat Dalia 200 gm</span></a></td>' +

    '<td id="sellingpricewgst_1" class="rightAlign"><input type="text" id="showsellingwithoutgst_1" class="floating-input tarifform-control noinput" value="8.19" readonly="" tabindex="-1"></td>' +
    '<td id="qty_1" name="qty_1" class="number" style="border: 1px solid #cccccc;border-radius: 10px !important;text-align: right" contenteditable="true">100</td>' +


    '<td id="stotalamount_1" style="font-weight:bold;text-align:right !important;">17.20</td>' +
    '</tr>';
  $("#sproduct_detail_record").prepend(product_html);

});
$("#productsearch").on('blur', function(e) {
var cell = document.getElementById('qty_1');
  setTimeout(function() {
    e.stopPropagation()
    var range, selection;
  if (document.body.createTextRange) {
    range = document.body.createTextRange();
    range.moveToElementText(cell);
    range.select();
  } else if (window.getSelection) {
    selection = window.getSelection();
    range = document.createRange();
    range.selectNodeContents(cell);
    selection.removeAllRanges();
    selection.addRange(range);
  }
  }, 30);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input class="form-control form-inputtext typeahead" value="" maxlength="" type="text" name="productsearch" id="productsearch" placeholder="Enter Product Name">
<table width="100%" border="0">
  <!-- <table class="table mb-0" style="margin:10px 0 0 0;font-size:0.92rem !important;" border="0"> -->

  <thead>
    <tr class="blue_Head">
      <th class="pa-10 leftAlign"> <span class="bold itemfocus"><span class="titems">1</span></span><span class="plural">Item</span></th>
      <th class="rightAlign" style="width:10%;">MRP</th>
      <th class="rightAlign" style="width:5%">Qty.</th>
      <th class="rightAlign" style="width:10%;">Total</th>

    </tr>
  </thead>

  <tbody id="sproduct_detail_record">

  </tbody>
</table>

Answer 2

Надеюсь, это также может работать как вы ожидаете:

Просто добавьте несколько строк в ваш код:

$("#productsearch").on('mouseout', function(e) {
  setTimeout(function() {
    e.stopPropagation()
    $("#qty_1").text("");
    console.log($("#qty_1").select().focus());
  }, 300);
});

Также сбросьте переменную product_ html, чтобы избежать дублирования, если это необходимо.

$("#sproduct_detail_record").prepend(product_html);
product_html = "";