There is a js (jquery) script with an event function to push elements with id = 'foo'! The script works fine, if the button with id = 'foo' is registered in html. But if we need to add elements dynamically by jquery.append with the same id = 'foo', then the script will not work on their pressing, only on static written in html. How to be? What can be done so that js can work on newly appeared elements?

$(document).ready(function($) { $( "#slim" ).click(function(event) { alert('test ok'); }); $( "#slimgen" ).click(function(event) { $("#boo").append('<input type="button" value="slim" id="slim"/>'); }); }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="button" value="generate" id="slimgen"/> <div id="boo"> <input type="button" value="slim" id="slim"/> </div>

  • as an option - to rewrite the function so that it is called by onclick current email address - InDevX
  • does not help, tried - user321474
  • So you did not really try, throw the implementation - InDevX
  • <script> $ (document) .ready (function ($) {$ ("#slim") .click (function (event) {alert ('test ok');}); $ ("#slimgen") .click (function (event) {$ ("# boo"). append ('<input type = "button" value = "slim" id = "slim" />');});}); </ script> <input type = "button" value = "generate" id = "slimgen" /> <div id = "boo"> <input type = "button" value = "slim" id = "slim" /> </ div> - user321474
  • $(document).on('click', '.another-class', function() { - always saves. If you have an #slim element, then why are you adding the same? - Rustam Gimranov

2 answers 2

From the point of view of client optimization, the listener should not hang the entire document. When you click on an item, the entire dom will be read.

 $(document).ready(function($) { // так делать не стоит $( document ).on... // Правильно делать слушатель родительскому элементу, а не всему документу. $( "#slimgen" ).on("click", ".slim", function(event) { alert('test ok'); }); });

If there are many elements in the house, and the $ (document) .on listener is not one, then a very noticeable decrease in performance will occur. This will be especially noticeable on mobile devices.

  • Added a timer, an element appears once a minute and what then? ... Once we are talking about optimization, it will be better to hang on a parent! Than for example 10,000 rows of the table ... - qwabra 8:43 pm

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="button" value="generate" id="slimgen" onclick="add($(this))"/> <div id="boo"> <input type="button" value="slim" id="slim" onclick="sayOk();"/> </div> <script> function sayOk(){ alert('test OK'); } function add(e){ let elem = e.next('div#boo').find('#slim'); let clone_elem = elem.clone(); $('#boo').append(clone_elem); } </script>

Well, and so, the id should be only 1 on the page, with duplicate emails duplicated and he, so think of something else instead of him (and then you may need to correct the function in accordance with the new "names").