0

When the new element button is clicked, it creates an element and adds the .numeric class, but the .numeric class is not applied to the new elements.

$(".numeric").keyup(function() {
  var num = $(this).val().match(/[0-9,]*/g)[0];
  var decimalNum = $(this).val().match(/[.][0-9]*/) || "";
  if (num) {
    var wholeNum = num.match(/[0-9]/g).reverse().join("").match(/[0-9]{1,3}/g).join(",").match(/./g).reverse().join("");
    var resultNum = wholeNum + decimalNum;
    $(this).val(resultNum);
  } else {
    $(this).val(num);
  }
});

$(document).ready(function() {
  $("input[type=tel]").focus(function() {
    $(this).attr('placeholder', 'hello world');
  });
});

        let createNewPic = ({
        accounts,
        currencies,
        id
    }) => {
        return `
                <tr id="trans-${id}">
                    <td class="table-input-box">
                         <select class="form-select form-select-sm account" name="trans[${id}][account_id]" required>
                            <option value=""></option>
                            ${
                                Object.keys(accounts).map(function (key) {
                                    const element = accounts[key];
                                    return `<option value="${element['id']}">
                                                                           ${element['first_name']} ${element['last_name']}
                                                                    </option>`
                                })
                            }
                        </select>
                    </td>
                    <td class="table-input-box">
                        <select class="form-select form-select-sm currency" name="trans[${id}][currency_id]" required>
                            <option value=""></option>
                            ${Object.keys(currencies).map(function (key) { const element = currencies[key];return `<option value="${element['id']}">${element['code']} | ${element['name']}</option>` })}
                        </select>
                    </td>
                    <td class="table-input-box">
                        <input type="tel" name="trans[${id}][debit]" class="form-control form-control-sm numeric">
                    </td>
                    
                    <td class="table-input-box">
                        <input type="tel" name="trans[${id}][credit]" class="form-control form-control-sm numeric"> 
                    </td>
                    <td class="table-input-box">
                        <textarea name="trans[${id}][description]" class="form-control form-control-sm" rows="1"></textarea>
                    </td>
                    <td class="table-input-box">
                        <label for="file" class="btn btn-secondary btn-sm">انتخاب</label>
                        <input type="file" class="form-control form-control-sm d-none" name="file" id="file">
                    </td>
                </tr>
            `
    }
ALI JAMALI
  • 38
  • 1
  • 6
  • 6
    1) Nowhere in that code are you adding a `.numeric` class 2) if the `.numeric` class is being dynamically bound somewhere else in your code, and you're expecting that event handler to be bound to it, that's your problem. You need to use a delegated event handler: `$(document).on('input', '.numeric', function() {` – Rory McCrossan Jul 05 '22 at 20:49
  • For this question a bit more detail (and HTML) may allow us to better assist you here. I created a snippet of your code to help facilitate here – Mark Schultheiss Jul 05 '22 at 20:52
  • It would also be helpful if you could provide the HTML output of your code. – TheCrzyMan Jul 05 '22 at 21:01
  • 1
    Thanks for updating the code in the question. I can see the `.numeric` class is dynamically added to the DOM after the page loads, so my first comment was accurate - you need a delegated event handler. For more details see the duplicate I marked. – Rory McCrossan Jul 05 '22 at 21:02
  • I called the code `$(".numeric").keyup(function() {)` after the script tag, is there a problem or not – ALI JAMALI Jul 05 '22 at 21:15

0 Answers0